grid casting

HTML

<html>
	<head>
		<title> grid casting </title>
		<style>
			body { margin: 0; position: fixed;}
			canvas { width: 100%; height: 100%; display: block; }
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
		<script>
    
    	const nthArray = (n, value) => Array.from(Array(n), () => Array(n).fill( value ));
		
			var renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );
      
      var scene = new THREE.Scene();
      scene.background = new THREE.Color( 0x2c2c2c );
			var camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 0.1, 1000 );
      var controls = new THREE.OrbitControls( camera, renderer.domElement );
      camera.position.set( -4.5, 10, -10 + 4.5 );
      controls.target.set( -4.5, 0, 4.5 );
      
			var gridHelper = new THREE.GridHelper( 10, 10 );
      gridHelper.position.set( -4.5, 0, 4.5 );
      scene.add( gridHelper );
      
      var check = false;
      var intersecting = false;
      var mouse = new THREE.Vector2();
      var raycaster = new THREE.Raycaster();
      
      var grid = nthArray( 10, true );
      
      var tileGeometry = new THREE.PlaneBufferGeometry(1,1);
      var tileMaterial = new THREE.MeshBasicMaterial( { color:0xacacac } );
      
      var plane = new THREE.Mesh( tileGeometry,
        new THREE.MeshBasicMaterial( { color: 0xff1202 } )
      );
      plane.rotation.x = -Math.PI/2;
      plane.position.y = 0.01;
      scene.add( plane );
      
      var map = new THREE.Mesh( 
      	new THREE.PlaneBufferGeometry(10,10),
        new THREE.MeshBasicMaterial( { visible: false } )
      );
      map.rotation.x = -Math.PI/2;
      map.position.set( -4.5, 0, 4.5 );
      scene.add( map );
      
      window.addEventListener( 'mousemove', onMouseMove );
 ...