JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="mainCanvas" width="400px" height="300px" ></canvas>

JavaScript

var scene = null;
var camera = null;
var renderer = null;

init();

function init() {
    renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('mainCanvas')
    });

    //renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = true;
    renderer.shadowCameraNear = 0.5;
    renderer.shadowCameraFar = 100;
    renderer.shadowCameraFov = 50;
    
    renderer.shadowMapBias = 0.0039;
    renderer.shadowMapDarkness = 0.5;
    renderer.shadowMapWidth = 1024;
    renderer.shadowMapHeight = 1024;
    
    scene = new THREE.Scene();
    
    camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
    camera.position.set(5, 15, 25);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);
    
    var light = new THREE.DirectionalLight(0xffffff);
    light.castShadow = true;
    light.shadowCameraVisible = true;
    light.position.set(-2.0, 5.0, 3.0);
    scene.add(light);
    
    var greenCube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),
                                   new THREE.MeshLambertMaterial({color: 0x00ff00}));
    greenCube.castShadow = true;
    scene.add(greenCube);
    
    var plane = new THREE.Mesh(new THREE.PlaneGeometry(8, 8),
                               new THREE.MeshLambertMaterial({color: 0xcccccc}));
    plane.rotation.x = -Math.PI / 2;
    plane.position.y = -1;
    plane.receiveShadow = true;
    scene.add(plane);
    
    renderer.render(scene, camera);
}