javascript - Three.js Auto rotate camera to focus on object - Stack Overflow

admin管理员组

文章数量:1287647

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?

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?

• javascript
• three.js

Share Improve this question Follow edited Jul 24, 2012 at 8:22 Bart 20k88 gold badges7171 silver badges7979 bronze badges asked Jul 24, 2012 at 8:16 user1533481user1533481 58644 gold badges88 silver badges1616 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Try camera.lookAt( object.position );

You don't need to use quaternions.

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

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.

Here is a snippet for rotating an object using slerp and quaternions:

//Initial and final quaternions
var startQ = new THREE.Quaternion(0,0,0,1);
var endQ = new THREE.Quaternion(0,1,0,0);

//Number of animation frames
var animFrames = 100;
//Pause between two consecutive animation frames
var deltaT = 1;
function goSlerping(acc) {
      if(acc>=1) return;

      //Let's assume that you want to rotate a 3D object named 'mesh'. So:
      THREE.Quaternion.slerp(startQ, endQ, mesh.quaternion, acc);
      setTimeout(function() {
          goSlerping(acc + (1/animFrames));
      }, deltaT);
}
goSlerping(1/animFrames);

So using the above script to rotate camera is quite the same: you just need to change mesh.quaternion with camera.quaternion.

You might want to visit here... https://threejsfundamentals/threejs/lessons/threejs-cameras.html I did the following and worked for me to get the focus on user-defined coordinate...

camera.lookAt(0, 10, 0);
-----
-----
-----
controls.target.set(0, 10, 0);
controls.update();

本文标签： javascriptThreejs Auto rotate camera to focus on objectStack Overflow