Three.js自动旋转相机以聚焦物体

Question

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

我想实现的是：当我点击按钮时，相机会自动旋转和缩放（更改其位置），以便用户的视图将聚焦于所选对象。所选对象的位置已知。

请给我一些如何实现的建议？

- user1533481

Answer 1

尝试使用camera.lookAt( object.position );

您不需要使用四元数。

如果需要，您可以将相机移动更近。

- WestLangley

---

谢谢你的回答。但是似乎这样做不会使摄像机平滑过渡到物体上。我认为问题可能出在需要改变摄像机的位置，因为当用鼠标旋转摄像机时，它会根据鼠标参数更新摄像机位置到新的位置。 - user1533481

在你的原问题中，你没有提及任何关于“平稳过渡”的内容。 - WestLangley

Answer 2

这里是使用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。

- Vito Gentile

Answer 3

您可能想访问这里... https://threejsfundamentals.org/threejs/lessons/threejs-cameras.html 我按照以下步骤操作，成功将焦点集中在用户定义的坐标上...

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

- Sushil Champ

Answer 4

四元数球面线性插值是实现平滑旋转到目标位置的好帮手。您需要使用四元数（camera.useQuaternion = true）。

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

这应该平稳地旋转到目标旋转。也许你需要调整最后一个参数。我不确定缩放。

- Sebastian Sachtleben

---

非常感谢您的回复。关于参数，目标四元数是targetObject.quaternion吗？“newQuaternion”参数需要更多的说明吗？我尝试了以下代码但它没有起作用。var newQuaternion = new THREE.Quaternion(); THREE.Quaternion.slerp(camera.quaternion, targetObj.quaternion, newQuaternion, 0.07); camera.quaternion = newQuaternion;您有关于此的示例或演示吗？ - user1533481