Project point on plane as seen from a camera

Questions
1

Hello everybody,

I have a camera and a point in front of the camera. In between the camera and the point I have a plane that has an arbitrary rotation.

I would like to project the point on the plane at the location where the point would be seen through the plane if the plane would be transparent.

Thank you!

2

If I understood correctly, this may help (the rotation / transformation of the plane won’t really matter in this case) :

const raycaster = new Three.Raycaster();

const cameraPosition = new Three.Vector3();
const pointPosition = new Three.Vector3();
const direction = new Three.Vector3();

camera.getWorldPosition(cameraPosition);
point.getWorldPosition(pointPosition);

direction.copy(pointPosition).sub(cameraPosition).normalize();

raycaster.set(cameraPosition, direction);

const hits = raycaster.intersectObjects([ plane ], true);
 
if (hits) {
  point.position.copy(hits[0].point);
}

If the camera is looking precisely at the point (ie. point is the target of the camera), you can also simplify it by removing direction calculations:

const raycaster = new Three.Raycaster();

const cameraPosition = new Three.Vector3();
const cameraDirection = new Three.Vector3();

camera.getWorldPosition(cameraPosition);
camera.getWorldDirection(cameraDirection); // NOTE We assume camera is looking at the point

raycaster.set(cameraPosition, cameraDirection);

const hits = raycaster.intersectObjects([ plane ], true);
 
if (hits) {
  point.position.copy(hits[0].point);
}
1 Like
3

Thank you very much! I didn’t know you can cast rays in any direction, not only from camera.

What I ended up with is the following:

function projectPointOnPlaneTowardsCamera(
    point: THREE.Vector3,
    plane: THREE.Plane,
    camera: THREE.Camera
) {
    const direction = new THREE.Vector3();
    direction.copy(camera.position).sub(point).normalize();
    const ray = new THREE.Ray(point, direction);
    return ray.intersectPlane(plane, new THREE.Vector3());
}