javascript - Three.js:围绕原点平滑相机倾斜

Question

我正在开发一个 Three.js 场景，该场景在指向北、东、南、西的两条线的中心渲染一个立方体。我使用三个 OrbitControl 进行交互和一些自定义代码(请参阅下面的链接)，以将相机围绕原点平滑地移动到预定义位置(N、E、S、W 和顶部)。

除了少数情况外，此方法运行良好:

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

2. 来自自定义旋转的 Lerp，例如单击“顶部”按钮可以看到西北方向的自上而下 View 。相机正确地调整到 y 轴上的矢量，但由于它的旋转不受控制，因此当调整完成后，它会捕捉到最终的相机旋转。

是否有更好的方法来处理相机围绕圆形路径上的原点从当前矢量到目标矢量的平滑过渡？这也适用于上述情况 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