three.js - 相机变化真的很奇怪

Question

我开发了一个简单的three.js应用程序,它渲染一个立方体,并有几个按钮来设置固定的摄像机位置.我在这里有一个代码演示:https://jsfiddle.net/ph0ropg7/9/

在我的应用程序中,我渲染一个立方体,我可以切换到顶视图(使用TOP VIEW按钮),然后我可以使用SHOW ALL按钮将立方体调整到屏幕.但是,我注意到三件奇怪的事情:

• 当我平移立方体然后旋转它时,如果我按下SHOW ALL按钮,当立方体调整到屏幕尺寸时,相机方向会改变.

• 当我使用相应的按钮设置顶视图时,控件似乎被阻止或类似的东西.

• 如果我通过点击TOP VIEW按钮设置顶视图,并在释放鼠标左键之前拖动,控件似乎变得疯狂.物体以非常奇怪和烦人的方式振动.

我很新three.js,我无法弄清楚为什么会发生这三件事.任何有关这些问题的帮助或建议都将不胜感激,谢谢.

Answer 1

我查看了 OrthographicTrackballControls源代码，注意到它lookAt在执行重置时使用了相机方法。该lookAt方法会将相机与其up矢量对齐。因此，您需要做的是删除对camera.lookAt(look_at_position);ShowAll 和 ShowTop 函数的调用并添加controls.up0.copy(camera.up);到您的_reset_controls_after_camera_movement方法中。控件现在将具有正确的向上向量，并且可以为您执行查看。

这是一个修改过的小提琴