JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 8;
    camera.position.y = 1;
    
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    document.body.appendChild(renderer.domElement);
    
    var controls = new THREE.OrbitControls( camera );

    scene = new THREE.Scene();
 
    var light = new THREE.SpotLight( 0xFFAA55 );
    light.castShadow = true;
    light.position.set( 1, 3, 5 );
    light.shadowCameraNear = 0.5;
    scene.add( light );
    
    //var helper = new THREE.SpotLightHelper( light );
    //scene.add( helper );
    
    // SHADOW CAMERA HELPER
   	helper = new THREE.CameraHelper( light.shadow.camera );
		scene.add( helper );

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    material = new THREE.MeshPhongMaterial({
        color: 0xff0000,
    });

    mesh = new THREE.Mesh(geometry, material);
    mesh.castShadow = true;
    scene.add(mesh);
    
    var geometry = new THREE.PlaneGeometry( 10, 10 );
    var plane = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color:0xffffff } ) );
    scene.add( plane );
    plane.position.set( 0, 0, -2 );
    plane.receiveShadow = true;

}

function animate() {

    requestAnimationFrame(animate);
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);

}