JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.min.js"></script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>





<div id="webGL"></div>

CSS

#webGL {
  position: absolute;
  top: 0px;
  left: 0px;
}

JavaScript

let renderer, camera, scene, orbit;
let mesh, ground, hemi;
let container;
let raycaster, mouse;
let w, h;



let mouseDown = (e) => {
	console.log('down')
}

let mouseUp = (e) => {
	console.log('up')
}

let mouseMove = (e) => {
	console.log('move')

	mouse.x = (e.clientX / w) * 2 - 1
	mouse.y = -(e.clientY / h) * 2 + 1
  
  raycaster.setFromCamera(mouse, camera)
  
  let i = raycaster.intersectObject(mesh)
  
  console.log(i.length > 0)
  if(i.length > 0) {

    
    mesh.material['color'] = new THREE.Color(0x0000FF)
  }
  else mesh.material['color'] = new THREE.Color(0x00FF00)
  
}

let init = () => {

	container = document.querySelector('#webGL')

	w = window.innerWidth + 300; // ADDING OFFSET
	h = window.innerHeight;

	renderer = new THREE.WebGLRenderer({ antialias: false });
  renderer.setSize(w, h);
  renderer.setClearColor(0xDDDDDD);
  
  container.style.left = '-300px';
  container.appendChild(renderer.domElement);
    
  scene = new THREE.Scene()
  scene.background = new THREE.Color(0xFFFFFF)
  
  camera = new THREE.PerspectiveCamera(40, w / h, 1, 100);
  camera.position.set(0, 5, 10);

  orbit = new THREE.OrbitControls(camera, renderer.domElement);
  orbit.update()
    
	// LIGHTS
  hemi = new THREE.HemisphereLight(0xFFFFFF, 0xFFFFFF, .5);
  scene.add(hemi);
  
  ground = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000), new THREE.MeshStandardMaterial({color:0xFFFFFF}));
  ground.rotateX(-Math.PI / 2)
  ground.receiveShadows = true;
  scene.add(ground);
  
  
  mesh = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial())
  mesh.castShadows = true;
  mesh.receiveShadows = true;
  scene.add(mesh); 
  
  
  raycaster = new THREE.Raycaster()
  mouse = new THREE.Vector2()
  
  renderer.domElement.addEventListener('pointermove', mouseMove)
  renderer.domElement.addEventListener('pointerdown', mouseDown)
  renderer.domElement.addEventListener('pointerup', mouseUp)
}



let loop = () => {
	
  requestAnimationFrame(loop);
	
 ...