JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
 <script src="https://threejs.org/examples/js/geometries/DecalGeometry.js"></script>

JavaScript

// a basic three.js scene

var container, renderer, scene, camera, controls;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({
        antialias: false
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xccccff);
    container = document.createElement('div');
    document.body.appendChild(container);
    container.appendChild(renderer.domElement);

    // scene
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 200, 800);
    camera.lookAt(scene.position);

    // (camera) controls
    // mouse controls: left button to rotate, 
    //    mouse wheel to zoom, right button to pan
    controls = new THREE.OrbitControls(camera, renderer.domElement);

    // light    
    var light = new THREE.PointLight(0xffffff);
    light.position.set(100, 250, 250);
    scene.add(light);


 function createMoss(object, frequency, decalMaterial){
this.frequency = frequency||10
var a = new THREE.Euler( 0, 1, 1, 'XYZ' );
var b = new THREE.Vector3( 1, 0, 1 );
b.applyEuler(a);
var decalGeometry = new THREE.Geometry();


for(var i = 0; i<object.geometry.vertices.length; i++){
if(Math.round(Math.random()*this.frequency) == 0){

var geometry =  new THREE.DecalGeometry( object, object.geometry.vertices[i], a, new THREE.Vector3(200, 200, 200) );

var mesh = new THREE.Mesh( geometry, decalMaterial );
//scene.add( mesh );
mesh.scale.copy(object.scale)
mesh.position.copy(object.position)
mesh.rotation.copy(object.rotation);

decalGeometry.merge(mesh.geometry);

}
}
var decal = new THREE.Mesh(decalGeometry);
scene.add(decal)
return decal;
}

 var textureLoader = new THREE.TextureLoader();
      THREE.TextureLoader.crossOrigin = '';
       var decalDiffuse = textureLoader.load( 'https://threejs.org/examples/textures/decal/decal-diffuse.png' );
          var decalNormal =...