JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<!-- A light at the top shines on a sphere which casts a shadow on two cube meshes. One cube mesh has MeshBasicMaterial, the other has ShadowMaterial.-->

CSS

html,body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}

JavaScript

'use strict';

const
		renderer = new THREE.WebGLRenderer({ antialias: true }),
		scene = new THREE.Scene(),
		camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000),
		shape = new THREE.BoxGeometry(1,1,1),
    
    basicMaterial = new THREE.MeshBasicMaterial({
      color: 0xff0000
    }),
    mesh = new THREE.Mesh(shape, basicMaterial),
    
    shadowMaterial = new THREE.ShadowMaterial({opacity:.2}),
    mesh2 = new THREE.Mesh(shape, shadowMaterial),
    
    
    lambertRedMaterial = new THREE.MeshLambertMaterial({
    	color  : 0xff0000
    }),
    sphereGeometry = new THREE.SphereGeometry( .2, 32, 32 ),
    sphereMaterial = new THREE.MeshLambertMaterial( {color: 0xff0000} ),
    sphere = new THREE.Mesh( sphereGeometry, sphereMaterial ),
   
    light = new THREE.SpotLight(0xff0000),
  
    helper = new THREE.CameraHelper( light.shadow.camera );
 
      
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

document.body.appendChild(renderer.domElement);

camera.position.z = 5;

light.position.y = 2.5;
light.intensity = 2;
light.castShadow = true;
light.shadow.mapSize.width = 1024;  
light.shadow.mapSize.height = 1024; 
light.shadow.camera.near = 1; 
light.shadow.camera.far = 500;   


sphere.position.y = 1.5;
sphere.castShadow = true;
sphere.receiveShadow = true;

mesh2.receiveShadow = true;

scene.add(mesh);
scene.add(mesh2);
scene.add( sphere );
scene.add(light);
scene.add(helper);

const render = function() {
	requestAnimationFrame(render);
  
  mesh.rotation.x+=0.01;
  mesh.rotation.y+=0.01;
  mesh.rotation.z+=0.01;
  
  mesh2.rotation.x+=0.01;
  mesh2.rotation.y+=0.01;
  mesh2.rotation.z+=0.01;
  
	renderer.render(scene, camera);
};
window.addEventListener(`resize`, ()=> {
	camera.aspect = window.innerWidth /...