Three.js Auto rotate camera to focus on object

Question

In three.js 3D space, I have some MESH objects for which its positions are known and a camera object.

What I would like to achieve is: when I click on a button, the camera will auto-rotate and zoom (change its position) so that the user's view will focus on the selected object. The selected object's position is known.

Please give me some suggestion on how to do that?

Answer 1

Try camera.lookAt( object.position );

You don't need to use quaternions.

You can then move the camera closer if you want to.

Answer 2

Quaternion slerp is your friend for smooth rotations to target location. You need to use quaternion (camera.useQuaternion = true).

var newQuaternion = new THREE.Quaternion();
THREE.Quaternion.slerp(camera.quaternion, destinationQuaternion, newQuaternion, 0.07);
camera.quaternion = newQuaternion;

This should smoothly rotate to the destination rotation. Maybe you need to play around with the last parameter. I'm not sure about zoom.