Three.js:平滑相机围绕原点

伍德沃克

我正在一个three.js场景中,该场景在指向北,东,南和西的两条线的中心渲染一个立方体。我使用三个OrbitControls进行交互,并使用一些自定义代码(请参见下面的链接),以将摄像机围绕原点平滑地拖到预定义的位置(N,E,S,W和顶部)。

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

  1. 单击“北”按钮,然后单击“南”按钮,从北向南拉动(东西向相同)。向量A和向量B之间的束缚失败,导致相机仅跳到向量B。

  2. 通过单击“顶部”按钮从自定义旋转(例如西北)到顶部视图向下倾斜。相机可以正确地沿y轴上的矢量进行捕捉,但是由于无法控制其旋转,因此在完成贴合后,它会捕捉到最终的相机旋转。

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

这是到目前为止我的CodePen three.js场景的链接单击位置按钮后,我存储了目标向量,并使用下面的代码行向目标移动

camera.position.lerp(cameraTarget, cameraLerpAlpha);
达里尔

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:将照相机平滑地朝对象旋转

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章