JSFiddle - React, Tailwind, and code Playground

by Luis Fraguada

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var controls = new THREE.OrbitControls(camera);

var renderer = new THREE.WebGLRenderer({
            alpha: true,
            antialias: true,
            preserveDrawingBuffer: true
        });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
cube.castShadow = true;
cube.receiveShadow = true;
scene.add( cube );

var geometry2 = new THREE.BoxGeometry( 4, 0.1, 4 );
var cube2 = new THREE.Mesh( geometry2, material );
cube2.position.set(0,-0.5,0);
cube2.castShadow = true;
cube2.receiveShadow = true;
scene.add( cube2 );

camera.position.z = 5;

var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

var plightE = new THREE.PointLight(0x666666, 1, 0);
plightE.position.set(5,0,0);
scene.add(plightE);
var pointLightHelperE = new THREE.PointLightHelper( plightE, 0.2 );
scene.add( pointLightHelperE );

var plightS = new THREE.PointLight(0x666666, 1, 0);
plightS.position.set(0,0,-5);
scene.add(plightS);
var pointLightHelperS = new THREE.PointLightHelper( plightS, 0.2 );
scene.add( pointLightHelperS );

var plightW = new THREE.PointLight(0x666666, 1, 0);
plightW.position.set(-5,0,0);
scene.add(plightW);
var pointLightHelperW = new THREE.PointLightHelper( plightW, 0.2 );
scene.add( pointLightHelperW );

 var plightN = new THREE.PointLight(0x666666, 1, 0);
plightN.position.set(0,0,5);
scene.add(plightN);
var pointLightHelperN = new THREE.PointLightHelper( plightN, 0.2 );
scene.add( pointLightHelperN );

var plightT = new THREE.PointLight(0x666666, 1, 0);
plightT.position.set(0,5,0);
scene.add(plightT);
var pointLightHelperT = new...