JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"></script>

JavaScript

let renderer, camera, scene
let spotLight1, spotLight2, ambientLight
let floor, box
let gui

function init() {
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.gammaInput = true
  renderer.gammaOutput = true
  renderer.toneMapping = THREE.LinearToneMapping
  renderer.toneMappingExposure = 1
  renderer.shadowMap.enabled = true
  renderer.shadowMap.type = THREE.PCFSoftShadowMap
  document.body.appendChild(renderer.domElement)

  ambientLight = new THREE.AmbientLight(0xffffff, 0.1)
  spotLight1 = createSpotlight(0xffaa00)
  spotLight1.position.set(15, 40, 35)
  spotLight2 = createSpotlight(0xaaff00)
  spotLight2.position.set(40, 40, 35)

  floor = createFloor()
  box = createBox()

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
  camera.position.set(40, 10, 45)
  camera.lookAt(box.position)

  scene = new THREE.Scene()
  scene.add(ambientLight)
  scene.add(spotLight1)
  scene.add(spotLight2)
  scene.add(floor)
  scene.add(box)
}

function createSpotlight(color) {
  const light = new THREE.SpotLight(color, 1)
  light.angle = Math.PI / 4
  light.penumbra = 0.05
  light.decay = 2
  light.distance = 200
  light.castShadow = true
  light.shadow.mapSize.width = 1024
  light.shadow.mapSize.height = 1024
  light.shadow.camera.near = 10
  light.shadow.camera.far = 200
  return light
}

function createFloor() {
  const material = new THREE.MeshPhongMaterial({
    color: 0x808080,
    dithering: true
  })
  const geometry = new THREE.PlaneBufferGeometry(2000, 2000)
  const mesh = new THREE.Mesh(geometry, material)
  mesh.position.set(0, -1, 0)
  mesh.rotation.x = -Math.PI * 0.5
  mesh.receiveShadow = true
  return mesh
}

function createBox() {
  var material = new THREE.MeshPhongMaterial({
    color: 0x4080ff,
    dithering: true
  })
  var geometry = new THREE.BoxBufferGeometry(3, 1, 2)
  var mesh = new THREE.Mesh(geometry, material)
  mesh.position.set(40, 2, 0)
 ...