# Center Perspective Camera on Coordinates

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?

• Have you tried transform.lookAt()? Aug 20, 2019 at 11:17
• @Chillersanim note that the question is tagged three.js, not unity. Aug 20, 2019 at 11:44
• Sorry, my bad. I thought I had filtered the questions. I'll look up some maths. Aug 20, 2019 at 11:45
• @DMGregory, I don't know three.js, but could give an answer using c# code. Is such a thing allowed? Based on the API of PerspectiveCamera, I believe that my answer could easily be parsed. Aug 20, 2019 at 11:51
• All helpful answers are allowed, but you'll generally find ones more tailored to the question attract more upvotes. Aug 20, 2019 at 11:54

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.

You can just use camera.lookAt(Vector3):

perspectiveCamera.lookAt(coordinates);

• Please check my comment on the question- this id changing rotation Aug 21, 2019 at 6:08

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.