JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
<script>
//goog.provide( 'green.THREEAddOns' );

THREE.DecalVertex = function( v, n ) {

	this.vertex = v;
	this.normal = n;

}

THREE.DecalVertex.prototype.clone = function() {

	return new THREE.DecalVertex( this.vertex.clone(), this.normal.clone() );

}

THREE.DecalGeometry = function( mesh, position, rotation, dimensions, check ) {

	THREE.Geometry.call( this );

	if( check === undefined ) check = null;
	check = check || new THREE.Vector3( 1, 1, 1 );

	this.uvs = [];

	this.cube = new THREE.Mesh( new THREE.BoxGeometry( dimensions.x, dimensions.y, dimensions.z ), new THREE.MeshBasicMaterial() );
	this.cube.rotation.set( rotation.x, rotation.y, rotation.z );
	this.cube.position.copy( position );
	this.cube.scale.set( 1, 1, 1 );
	this.cube.updateMatrix();

    this.iCubeMatrix = ( new THREE.Matrix4() ).getInverse( this.cube.matrix );
    
    this.faceIndices = [ 'a', 'b', 'c', 'd' ];

    this.clipFace = function( inVertices, plane ) {

    	var size = .5 * Math.abs( ( dimensions.clone() ).dot( plane ) );

	    function clip( v0, v1, p ) {

	    	var d0 = v0.vertex.dot( p ) - size,
				d1 = v1.vertex.dot( p ) - size;

			var s = d0 / ( d0 - d1 );
			var v = new THREE.DecalVertex( 
				new THREE.Vector3( 
					v0.vertex.x + s * ( v1.vertex.x - v0.vertex.x ),
					v0.vertex.y + s * ( v1.vertex.y - v0.vertex.y ),
					v0.vertex.z + s * ( v1.vertex.z - v0.vertex.z ) 
				),
				new THREE.Vector3(
					v0.normal.x + s * ( v1.normal.x - v0.normal.x ),
					v0.normal.y + s * ( v1.normal.y - v0.normal.y ),
					v0.normal.z + s * ( v1.normal.z - v0.normal.z ) 
				)
			);

			// need to clip more values (texture coordinates)? do it this way:
			//intersectpoint.value = a.value + s*(b.value-a.value);

			return v;

	    }

    	if( inVertices.length === 0 ) return [];
    	var outVertices = [];

    	for( var j = 0; j < inVertices.length; j += 3 ) {

    		var v1Out, v2Out, v3Out, total...

JavaScript

var container, camera, renderer, scene, directionalLight, fillLight, raycaster, mouse;
var WIDTH = window.innerWidth - 30;
var HEIGHT = window.innerHeight - 30;
            
// camera
var angle = 45;
var aspect = WIDTH / HEIGHT;
var near = 0.1;
var far = 10000;

// objects
var cube;
var sphere;
var cube;

setupScene();
addObjects();
animate();

function setupScene(){



    container = document.createElement('div');
    document.body.appendChild(container);
                
    camera = new THREE.PerspectiveCamera(angle, aspect, near, far);
    camera.position.set(0, 0, -500);
                
    scene = new THREE.Scene();
    camera.lookAt(scene.position);

    fillLight = new THREE.DirectionalLight(0xffffff, 0.8);
    fillLight.position.set( 0, 100, -200);
    fillLight.castShadow = true;
    fillLight.shadowDarkness = 0.4;
    fillLight.shadowMapWidth = 1024;
    fillLight.shadowMapHeight = 1024;
    scene.add(fillLight);

    renderer = new THREE.WebGLRenderer({antialias : true});
    renderer.setClearColor(0xcccccc, 1);
    renderer.setSize(WIDTH, HEIGHT);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    container.appendChild(renderer.domElement);

    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();

    document.addEventListener('mousedown', onDocumentMouseDown, false);
}

function addObjects(){
    var geometry = new THREE.BoxGeometry(200, 200, 200, 8, 8, 8);
    var material = new THREE.MeshLambertMaterial({color: 0xff0000});
    cube = new THREE.Mesh(geometry, material);

    // addWireframeHelper(cube, 0xffffff, 1);

    scene.add(cube);
	  THREE.ImageUtils.crossOrigin = 'Anonymous';
		var texture = THREE.ImageUtils.loadTexture( 'http://i.imgur.com/RNb17q7.png' );
    geometry.faces.forEach(function(face){
        var index = face.a;
        var vertex = geometry.vertices[index];
        var direction = new THREE.Vector3(0,1,0);
        addDecal(cube, vertex, direction, texture);
   ...