JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>RayCaster-Plane</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, height=device-height" />
	</head>
	<body>
		<div id="info"></div>
		</div>
		<script src="three.js"></script>
	</body>
</html>

CSS

html{height: 100%}
			body {text-align:center; background-color: #000000; height: 100%; margin: 0px; overflow: hidden}
			#info {	position: absolute; top: 60px; width: 300px; margin: 10px; text-align: left; z-index: 90; display:none}

JavaScript

var w = window.innerWidth;
	var h = window.innerHeight ;
	var mouseDown = { button:-1	}
	var ms = new THREE.Vector2(0, 0);
	var scene = new THREE.Scene();	
	scene.background = new THREE.Color(0x37759c ); 
	var fov = 37;
	var aspect = w / h;
	var cnear = 10;
	var cfar = 4000;
	var cam = new THREE.PerspectiveCamera( fov, aspect, cnear, cfar );
	scene.add(cam);
	cam.position.set(0, 0, 250.0);

	var renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( w, h );
	renderer.autoClear = true;
	document.body.appendChild( renderer.domElement );

	var watch = document.getElementById("info");
	watch.style.display = "block";
	watch.style.color = 'white';

	document.addEventListener( 'mousemove', onDocumentMouseMove, false );
	document.addEventListener( 'mousedown', onDocumentMouseDown, false );
	document.addEventListener( 'mouseup', onDocumentMouseUp, false );

	var raycaster = new THREE.Raycaster();
	var testplane = createPlane( 110, 50);
	animate();

	function onDocumentMouseMove( e ) {
		ms.x =  ( e.clientX / window.innerWidth ) * 2 - 1;
		ms.y = -( e.clientY / window.innerHeight ) * 2 + 1;
	}
	
	function onDocumentMouseDown( e ){	mouseDown.button = e.button; }
	function onDocumentMouseUp( e ){ mouseDown.button = -1; }

	function createPlane(w, h){
		let s = new THREE.Shape();
		s.moveTo(0, 0);
		s.lineTo(w, 0);
		s.lineTo(w, -h);
		s.lineTo(0, -h);
		s.lineTo(0, 0);

		let shapegeom = new THREE.ShapeGeometry(s);
		let m = new THREE.Mesh( shapegeom, new THREE.MeshBasicMaterial());	
		shapegeom.dispose();
		shapegeom = null;

		let o = {
			m: m, //mesh
			w: w, //width
			h: h, //height
		}  

		scene.add(o.m);	
		return o;
	}

	function testRayCaster(){
		let o = testplane;

		raycaster.setFromCamera( ms, cam );
		intersects = raycaster.intersectObject(o.m, false);

		// lf left mouse down
		if (mouseDown.button === 0){ 
			let objXpos = -110;
			let rightVertsPos = 220;
			let v =...