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:

Mugen87 · Accepted Answer · 2022-12-31 22:26:01Z

0

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.

answered Dec 31, 2022 at 22:26

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Ijlal Over a year ago

I used your suggestion and update the code. Please have a look at the post again. @Mugen87

Mugen87 Over a year ago

I've added your code to a live example and the result is as expected: jsfiddle.net/uzgb3vjs.

Collectives™ on Stack Overflow

Equation of line from center of camera to plane in ThreeJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related