JSFiddle - React, Tailwind, and code Playground

HTML

Canvas:<br>
<div id="canv_0">
<canvas style="border: 1px solid #ccc;margin: 20px;" id="canv" width="400" height="300"></canvas>
</div>

JavaScript

}

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(50, 400 / 300, 0.01, 100);
    camera.position.set(5, 0, 0.4);
    camera.rotation.set(Math.PI / 2, Math.PI / 2, 0);
    scene.add(camera);
    renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('canv'),
        clearAlpha: 1,
        clearColor: 0xdddddd,
        antialias: true
    })
    renderer.shadowMapEnabled = true;
    cubeM = new THREE.MeshPhongMaterial({
        color: 0xff0000
    });
    cube = new THREE.Mesh(
    new THREE.CubeGeometry(1, 1, 1), cubeM);
    cube.position.set(0, 0, 0);
    cube.rotation.set(0, 0, 0);
    scene.add(cube);
    cube.recieveShadow = true;
    cube.castShadow = true;
    terrain = new THREE.Mesh(
    new THREE.CubeGeometry(10, 10, 1), new THREE.MeshPhongMaterial({
        color: 0x00ff00
    }));
    terrain.castShadow = true;
    terrain.recieveShadow = true;
    terrain.position.set(1, 0, -1);
    terrain.rotation.set(0, 0, 0);

    scene.add(terrain);


    spot = new THREE.SpotLight();

/**

Un-Comment this 

*/
    //spot.castShadow=true;

    spot.position.set(-2, 2, 1.5)
    spot.rotation.set(0, 0, 0);
    scene.add(spot);

    (function animate() {


        renderer.render(scene, camera);


        requestAnimationFrame(animate);

    })();
}

var scene, camera, renderer, cube, cubeM, terrain, spot;

window.onload = init;




function test() {