Equation of line from center of camera to plane in ThreeJS

Question

I am working on a fork of threeJS editor and for a particular functionality, I need to get the world point where the center of camera is pointing at.

I believe that if I am able to get the equation of line from center of camera in the direction it's facing, then I can find the point at y=0 and I would eventually get the point on the plane.

I have tried the below code but it seems to also converge to the axis of plane i.e. (0,0,0)

let forward = new THREE.Vector3();
camera.getWorldDirection(forward)
let firstPoint = camera.position.clone();
let secondPoint = new THREE.Vector3();
secondPoint.addVectors(firstPoint, forward);

I have changed the code now to:

let camera = scene.getObjectByProperty("uuid", scene.userData.activeCamera);
let plane = new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), 0 );
let ray = new THREE.Ray();
let cameraPos = new THREE.Vector3();
let cameraDir = new THREE.Vector3();
camera.getWorldPosition(cameraPos);
camera.getWorldDirection(cameraDir);
ray.set(cameraPos, cameraDir);
let target = new THREE.Vector3();
ray.intersectPlane(plane, target);
this.controls.target = target;

and still the target that I get converges to zero and looks like below:

x: 1.7763568394002505e-15
y: 0
z: 8.881784197001252e-15

Below is an image which shows where the camera is exactly looking at in the editor:

Answer 1

I suggest you use the following approach:

• Setup an instance of THREE.Plane representing the XZ-plane.
• Setup an instance of THREE.Ray based on the camera's position and look direction in world space.
• Use Ray.intersectPlane() to find the intersection point of the ray and the plane.