Center Perspective Camera on Coordinates

Question

I've got a PerspectiveCamera and set of coordinates (x,y,z).

How could I pan the camera to make these coordinates at the center of the screen?

Answer 1

The idea is to project the target point onto the plane passing through the camera spanned by the camera's up and right vector, and translate the camera to this point.

You can do this in one line with fairly simple math. Pseudocode:

cameraPosition = targetPosition + cameraForward*dot(cameraPosition - targetPosition, cameraForward)

where cameraForward is the normalized camera's direction, targetPosition is the point you want to be at the center of view and cameraPosition is the camera's position. All are in the same coordinate space.

Answer 2

You can just use camera.lookAt(Vector3):

perspectiveCamera.lookAt(coordinates);

Answer 3

Here is how I would solve this problem.

Step explanation:

1. Calculate nearest point on camera forward ray for target position
   You want the nearest point, because this point lies on the flat movement plane.
   As long as you move along this movement plane, your vertical distance won't change.
2. Find distance vector (nearest point - camera position)
   The distance vector points from the camera to the nearest point.
3. Place camera at (target position - distance vector)
   You need to mirror the distance vector, as you want the camera position relative to the target.

Nearest point:

For the nearest point to the ray, you can use the Ray class and the closestPointToPoint method.
Just create a ray going from the camera position allong the camera forward vector.

Sorry, no code, I don't write three.js.
But I think it isn't to hard to code it yourself.