How to allow raycaster to intersect a plane buffer geometry in Three.js?

Questions
,
1

In three.js I’m trying to get a raycaster to intersect a plane buffer geometry and tell me the exact point of intersection or distance from origin.

Here is an example where it does not work

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 = Math.PI/2.0;
    var quaternion = new THREE.Quaternion();
    //Rotate Around z Axis
		quaternion.setFromAxisAngle( new THREE.Vector3( 0, 0, 1 ), -Math.PI/2 );
		actualVec.applyQuaternion( quaternion );
    
    //Rotate around y axis
    var quaternion2 = new THREE.Quaternion();
		quaternion2.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), -Math.PI/2.0 );
		actualVec.applyQuaternion( quaternion2 );
    actualVec.negate();
    
     //Add arrowHelper1
    let newOrigin = new THREE.Vector3(0,0,2.5);
    //normalize the direction vector (convert to vector of length 1)
    dir.normalize();
    var length = 1;
    var hex = 0xff0000;

    arrowHelperMain = new THREE.ArrowHelper( actualVec, newOrigin, length, hex, 0.1, 0.1 );
    scene.add( arrowHelperMain ); 
    
    //Raycaster.
    var raycaster = new THREE.Raycaster();
    actualVec.normalize();
    console.log(newOrigin.x,newOrigin.y,newOrigin.z, actualVec.x,actualVec.y,actualVec.z);
    raycaster.set(newOrigin, actualVec);
    // calculate objects intersecting the picking ray
		var intersects = raycaster.intersectObjects( scene.children, true );
    //console.log(intersects);
		for ( var i = 0; i < intersects.length; i++ ) {
			intersects[ i ].object.material.color.set( 0x00ff00 );
      
      var inj = intersects[ i ];
      console.log(inj.point.x, inj.point.y, inj.point.z, inj.distance, inj.object.name);
		}    
}

function animate() {

    requestAnimationFrame( animate );
    
    controls.update();

    renderer.render( scene, camera );

}

The console output is

0, 0, 2.5, -2.220446049250313e-16, -2.220446049250313e-16, -1
-5.551115123125783e-16, -5.551115123125783e-16, 0, 2.5, "map"
-5.551115123125783e-16, -5.551115123125783e-16, 0, 2.5, "map"
0, 0, 0, 2.5, ""

The ray origin is (0, 0, 2.5) and its direction is (-2.220446049250313e-16, -2.220446049250313e-16, -1) which does towards the plane.

For the map plane, it tells me its 2.5 distance away, but on line 53, we see its actually -6 away the origin. So its true distance is 6+2.5=8.5.

Anyone know what’s wrong here?

2

/cc

3

in removed