JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/OrbitControls.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/Detector.js"></script>
<script src="https://jeromeetienne.github.io/threex.dynamictexture/threex.dynamictexture.js"></script>
<div id="results-cube" style="position: absolute; left:50px; top:50px; width: 400px; height: 400px; background-color: #f2f2f2; cursor: pointer;"></div>

JavaScript

this.cubeExists = true;
let container;
let scene;
let camera;
let renderer;
let controls;
let cube;
let sphere;

const update = () => {
  controls.update();
};

const render = () => {
  renderer.render(scene, camera);
};

const animate = () => {
  requestAnimationFrame(animate);
  render();
  update();
};

const init = () => {
  // SCENE
  scene = new THREE.Scene();
  // CAMERA
  const SCREEN_WIDTH = 400;
  const SCREEN_HEIGHT = 400;
  const VIEW_ANGLE = 45;
  const ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
  const NEAR = 0.1;
  const FAR = 200000;
  camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
  scene.add(camera);
  camera.position.set(400, 400, 400);
  camera.lookAt(scene.position);
  // RENDERER
  if (Detector.webgl)
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
  else {
    renderer = new THREE.CanvasRenderer();
  }
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  renderer.setClearColor(0x666666);
  container = document.getElementById('results-cube');
  container.appendChild(renderer.domElement);
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  	// Add Sphere
	let geometry = new THREE.SphereBufferGeometry(  55, 32, 32 );

	let material = new THREE.MeshStandardMaterial();
	material.roughness = 0.5 * 0.5 + 0.25;
	material.metalness = 0.3;
	material.color.setHSL( 0.5, 1.0, 0.3 );
	
	sphere = new THREE.Mesh( geometry, material );
	scene.add( sphere );
	sphere.position.set(-200, 150, 100);
};

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onDocumentMouseDown(event) {
  const holder = renderer.domElement;
  const rect = holder.getBoundingClientRect();
  console.log(rect);
  console.log('event', event);
  mouse.x = ((event.pageX - rect.left - window.scrollX) / holder.clientWidth) * 2 - 1;
  mouse.y = -((event.pageY - rect.top - window.scrollY) / holder.clientHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  var intersects =...