javascript - Three.js 自动旋转相机以聚焦对象

Question

在 three.js 3D 空间中，我有一些位置已知的 MESH 对象和一个相机对象。

我想要实现的是：当我点击一个按钮时，相机会自动旋转和缩放（改变它的位置），这样用户的视图就会聚焦在选定的对象上。选定对象的位置是已知的。

请给我一些建议如何做到这一点？

Answer 1

尝试camera.lookAt( object.position );

你不需要使用四元数。

然后，您可以根据需要将相机移近一些。

Answer 2

Quaternion slerp 是您平滑旋转到目标位置的朋友。您需要使用四元数（camera.useQuaternion = true）。

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

这应该平滑地旋转到目标旋转。也许您需要使用最后一个参数。我不确定缩放。

Answer 3

这是使用 slerp 和四元数旋转对象的片段：

//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);

所以使用上面的脚本来旋转相机是完全一样的：你只需要改变mesh.quaternion.camera.quaternion

Answer 4

您可能想访问这里... https://threejsfundamentals.org/threejs/lessons/threejs-cameras.html 我做了以下工作并为我工作以专注于用户定义的坐标...

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