Raycaster.ray intersecting Plane

Questions
,
1

Hello,

I need to find a point on yz plane which is pointer on regardless to camera position. I am trying to use raycaster.ray.intersectPlane for this. So far two things dont work for me.

First, raycaster.ray is exactly the same on every mouse position? Why?
Second, raycaster.ray.intersectPlane(planeX, intersects) returns, origin, position of camera.

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var planeX = new THREE.Plane(); //default plane should be ((1,0,0), 0)

window.addEventListener( 'pointermove', onPointerMove, { passive: false } );

function onPointerMove(event){
	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
	raycaster.setFromCamera( mouse, camera );
	if(event.pointerType == 'pen' &&  event.pressure > 0) { // I am using pen on ms surface
	
		var intersects = new THREE.Vector3();
		raycaster.ray.intersectPlane(planeX, intersects);
		
        console.log(raycaster.ray); 
		console.log(intersects);

	}
}
2

You plane should be created like this:

var plane = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 0 );

Only then your camera looks right at the plane. A plane normal vector of ( 1, 0, 0 ) means the camera looks from the side at the plane. Or in other words, the plane intersects the camera. That’s the reason why your initial result was always the same (the camera position).

https://jsfiddle.net/f2Lommf5/5922/

1 Like