Three.js：围绕原点的平滑相机

Question

我正在制作一个three.js 场景，它在指向北、东、南和西的两条线的中心渲染一个立方体。我正在使用三个 OrbitControls 进行交互，并使用一些自定义代码（请参见下面的链接）来平滑地将相机绕原点移动到预定义的位置（N、E、S、W 和顶部）。

这很好用，除了少数情况：

1. 通过单击“北”按钮然后单击“南”按钮从北到南进行 Lerp（从东到西的问题相同）。矢量 A 和 B 之间的 Lerping 失败，导致相机只是跳转到矢量 B。

2. 来自自定义轮换的 Lerp，例如通过单击“顶部”按钮，从 NW 到自上而下的视图。相机正确地调整到 y 轴上的向量，但由于它的旋转不受控制，所以当 lerping 完成时，它会捕捉到最终的相机旋转。

有没有更好的方法来处理相机在从当前向量到目标向量的圆形路径上围绕原点的平滑过渡？这也适用于上述情况 1 和 2。

这里是a link to my CodePen three.js scene so far。单击位置按钮后，我存储目标向量并使用以下行向目标移动

camera.position.lerp(cameraTarget, cameraLerpAlpha);

Answer 1

lerp 不确定如何围绕该中心点进行轨道旋转。为了快速修复，在第 4-8 行（或动画开始时）稍微偏移位置，以便给它一个发送它的方向：

//notice the 0.1s
n: new THREE.Vector3(0, 0.1, -5),
e: new THREE.Vector3(5, 0.1, 0),
s: new THREE.Vector3(0, 0, 5),
w: new THREE.Vector3(-5, 0, 0),
top: new THREE.Vector3(0, 5, 0.1)

但如果你希望它不被与中心点的距离锁定，你真的需要查看这个答案并使用四元数 slerp 而不是 lerp：threejs: smoothly rotate camera towards an object