JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://assets.verold.com/verold_api/lib/OrbitControls.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://assets.verold.com/verold_api/lib/OrbitControls.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">

void main() 
{ 
	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<!-- fragment shader -->

<script id="fragmentShader" type="x-shader/x-vertex"> 

	uniform sampler2D shadowMap[MAX_SHADOWS];
	uniform vec2 shadowMapSize[MAX_SHADOWS];
	uniform float shadowDarkness[MAX_SHADOWS];
	uniform float shadowBias[MAX_SHADOWS];

	varying vec4 vShadowCoord[MAX_SHADOWS];

	float unpackDepth( const in vec4 rgba_depth ) {
		const vec4 bit_shift = vec4( 1.0 / ( 256.0 * 256.0 * 256.0 ), 1.0 / ( 256.0 * 256.0 ), 1.0 / 256.0, 1.0 );
		float depth = dot( rgba_depth, bit_shift );
		return depth;
	}

	void main() 
	{ 

		float fDepth;
		vec3 shadowColor = vec3( 1.0 );

		for( int i = 0; i < MAX_SHADOWS; i ++ ) {
			vec3 shadowCoord = vShadowCoord[ i ].xyz / vShadowCoord[ i ].w;
		
			bvec4 inFrustumVec = bvec4 ( shadowCoord.x >= 0.0, shadowCoord.x <= 1.0, shadowCoord.y >= 0.0, shadowCoord.y <= 1.0 );
			bool inFrustum = all( inFrustumVec );


			bvec2 frustumTestVec = bvec2( inFrustum, shadowCoord.z <= 1.0 );
			bool frustumTest = all( frustumTestVec );

			if ( frustumTest ) {
				shadowCoord.z += shadowBias[ i ];
				vec4 rgbaDepth = texture2D( shadowMap[ i ], shadowCoord.xy );
				float fDepth = unpackDepth( rgbaDepth );
				if ( fDepth < shadowCoord.z )
					shadowColor = min( shadowColor, vec3( shadowDarkness[ i ] ) );
			}
		}
		if (shadowColor.r < 0.9) {
			gl_FragColor = vec4 (0.3, 0.9, 0.0, 1.0);
		} else {
			gl_FragColor = vec4 (0.8, 0.8, 0.8, 1.0);
//			discard;
		}

	}  
</script>

<div id="container"><canvas width="1024" height="820"></canvas></div>

JavaScript

////////////////////////////////////////////////////////////////////////////////
/*global THREE, window, document*/
var meshGlobal;
var camera, scene, renderer, geometry;
var cameraTop;
var cameraControls;
var clippingLight;

function fillScene() {
	scene = new THREE.Scene();
	

	clippingLight = new THREE.SpotLight (  0xafafaf, 0.97  );
    clippingLight.position.set (100, 200, 1400);
	clippingLight.castShadow = true;
	clippingLight.shadowCameraVisible = true;
    scene.add (clippingLight);


	// Triangle Mesh
	
	var basicMaterial = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: true,
		opacity: 0.1,
		transparent: true
    });

	
	var lMaterial = new THREE.MeshLambertMaterial( {side: THREE.DoubleSide, wireframe: true});
	lMaterial.color.r = 0.1;
	lMaterial.color.g = 0.9;
	lMaterial.color.b = 0.7;
	lMaterial.ambient.copy (lMaterial.color);

	var pMaterial = new THREE.MeshPhongMaterial( {vertexColors: THREE.VertexColors, shininess: 100, side: THREE.DoubleSide } );
	pMaterial.specular.setRGB( 0.5, 0.5, 0.5 );
	
	var sphere = new THREE.Mesh( new THREE.SphereGeometry(200, 5, 5, 5), basicMaterial );
	sphere.position.y = 100;
	sphere.position.z = 10;
	sphere.castShadow = true;
	scene.add (sphere);



	// shader material cloned from lambert material
	var lambertShader = THREE.ShaderLib['lambert'];
	var vShader = lambertShader.vertexShader;
	var uniforms = THREE.UniformsUtils.clone(lambertShader.uniforms);
	
	var fShader = document.getElementById( 'fragmentShader' ).textContent; 
	//fShader = lambertShader.fragmentShader;
	var sMaterial = new THREE.ShaderMaterial ({
		uniforms: uniforms,
		vertexShader: vShader,

		fragmentShader: fShader,
		lights: true,
	})
	
	var cube = new THREE.Mesh( new THREE.CubeGeometry(400, 400, 400), sMaterial );
	cube.position.z = -500;
	cube.receiveShadow = true;
    scene.add( cube );

}

function init() {
	var canvasWidth = 1200;
	var canvasHeight = 600;
	var canvasRatio = canvasWidth / canvasHeight;

	//...