Ray Intersection.
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.119.1/examples/jsm/controls/OrbitControls.js";
var mesh, renderer, scene, camera, controls, arrowHelperMain, terrainGroup;
terrainGroup = [];
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
var light = new THREE.AmbientLight(0x404040 )
scene.add(light);
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 0, 20 );
// controls
controls = new OrbitControls( camera, renderer.domElement );
controls.touches.ONE = THREE.TOUCH.PAN;
controls.touches.TWO = THREE.TOUCH.DOLLY_ROTATE;
// ambient
scene.add( new THREE.AmbientLight( 0x222222 ) );
// light
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 0,0, 20 );
scene.add( light );
// axes
//scene.add( new THREE.AxesHelper( 20 ) );
//Add Plane
var geometry = new THREE.PlaneBufferGeometry( 3,3);
var material = new THREE.MeshStandardMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
plane.name="map";
plane.position.z = -6.0;
scene.add(plane);
//Add arrowHelper1
let dir = new THREE.Vector3(0,0.5,0);
let origin = new THREE.Vector3(0,0,0);
//normalize the direction vector (convert to vector of length 1)
dir.normalize();
var length = 1;
var hex = 0xff0000;
let actualVec = new THREE.Vector3();
actualVec.subVectors(dir,origin);
actualVec.normalize();
let angle =...