JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

const RED = 0xff0000;
const GREEN = 0x00ff00;
const BLUE = 0x0000ff;
const AXIS_LENGTH = 100;

let canvas, scene, renderer, camera;

function initRenderer() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.shadowMap.enabled = true;
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
}

function initCamera() {
  camera = new THREE.PerspectiveCamera(70, 1, 1, 10000);
  camera.name = 'camera';
  scene.add(camera);
  camera.position.set(180, 150, 100);
}

function initLight() {
  const light = new THREE.DirectionalLight(0xFFFFFF, 5);
  light.name = 'light';
  light.castShadow = true;
  light.position.set(-100, 100, 0);
  light.target.position.set(0, 100, 100);
  scene.add(light);
  light.target.name = 'light.target';
  scene.add(light.target);
  //add light helper
  const lightHelper = new THREE.DirectionalLightHelper(light, 10);
  lightHelper.name = 'lightHelper';
  scene.add(lightHelper);
  lightHelper.parent.updateMatrixWorld();
  lightHelper.update();
  //add shadow helper
  const shadowHelper = new THREE.CameraHelper(light.shadow.camera);
  shadowHelper.name = 'shadowHelper';
  scene.add(shadowHelper);
}

function initAxes() {
  function makeAxis(start, finish, material, name) {
    const points = [start, finish];
    const axisGeometry = new THREE.BufferGeometry().setFromPoints(points);
    const newAxis = new THREE.Line(axisGeometry, material);
    newAxis.name = name;
    scene.add(newAxis);
  }
  var xAxisMaterial = new THREE.LineBasicMaterial({
    color: RED
  });
  var yAxisMaterial = new THREE.LineBasicMaterial({
    color: GREEN
  });
  var zAxisMaterial = new THREE.LineBasicMaterial({
    color: BLUE
  });
  makeAxis(new THREE.Vector3(-AXIS_LENGTH, 0, 0), new THREE.Vector3(AXIS_LENGTH, 0, 0), xAxisMaterial, 'xAxis');
  makeAxis(new THREE.Vector3(0, -AXIS_LENGTH, 0), new THREE.Vector3(0, AXIS_LENGTH, 0), yAxisMaterial,...