JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c"></canvas>

CSS

html, body {
  margin: 0;
  height: 100%;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
}

JavaScript

// Three.js - Load .OBJ ?
// from https://threejsfundamentals.org/threejs/threejs-load-obj-no-materials.html


import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/controls/OrbitControls.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

//Create a WebGLRenderer and turn on shadows in the renderer
//const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
  const fov = 60;
  const aspect = 2;  // the canvas default
  const near = 1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(-10, 10, -10);

  const controls = new OrbitControls(camera, canvas);
  controls.target.set(0, 5, 0);
  controls.update();

  const scene = new THREE.Scene();
  scene.background = new THREE.Color('white');
//Create a SpotLight and turn on shadows for the light
const light = new THREE.SpotLight( 0xffffff );
light.castShadow = true; // default false
light.position.set(2,5,2);
scene.add( light );

//Set up shadow properties for the light
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 500; // default
light.shadow.bias = -0.005;
light.shadow.focus = 1; // default

//Create a sphere that cast shadows (but does not receive them)
const sphereGeometry = new THREE.BoxGeometry( 2,2, 1, 1 );
const sphereMaterial = new THREE.MeshStandardMaterial( { side: THREE.FrontSide, color: 0xff0000 } );
const cloneMaterial = new THREE.MeshStandardMaterial( { side: THREE.BackSide, color: 0x0000ff } );
cloneMaterial.visible=false;

const count =...