three.js - 相机变化的行为非常奇怪

Question

three.js - 相机变化的行为非常奇怪

8

我开发了一个简单的three.js应用程序，用于渲染一个立方体，并有几个按钮设置固定的相机位置。我在这里有我的代码演示：https://jsfiddle.net/ph0ropg7/9/ 在我的应用程序中，我渲染了一个立方体，我可以通过TOP VIEW按钮切换到顶视图，并可以使用SHOW ALL按钮调整立方体大小以适应屏幕。然而，我注意到了三件奇怪的事情：

当我移动立方体并旋转它时，如果我按下SHOW ALL按钮，则在将立方体调整为屏幕大小时，相机方向会改变。
当我使用其对应的按钮设置顶视��时，控件似乎被阻塞或类似此类的问题。
如果我通过单击TOP VIEW按钮并在释放鼠标左键之前拖动，则控件似乎会变得疯狂。物体保持在一种非常奇怪和令人烦恼的方式下不断震动。

我对three.js非常陌生，无法弄清楚为什么会发生这三件事。感谢任何帮助或建议来解决这些问题。

- GLR

我不明白你在第一点中的意思。你不想改变相机的方向吗？但是在function ShowAll()中，你明确地使用了camera.lookAt(look_at_position);这行代码来改变它的方向。 - micnil

2

我做了一些实验，但还没有得出结论。我同意行为很奇怪。也许我还没有完全理解代码，但是你是否需要在SetTopView()中调用_reset_controls_after_camera_movement()? 删除那行似乎也能正常工作。此外，在错误报告中发现了有关OrthographicTrackballControls的reset()方法的问题。也许这会导致奇怪的行为... - micnil

在第一点中，@micnil，我的意思是以下内容。使用“显示全部”按钮，我想将对象居中到屏幕，无论其当前方向如何。使用我的代码，按下该按钮后，立方体会被“旋转”（当我按照第一点所述进行时）。更确切地说，相机被旋转，而不是立方体。 - GLR

@Rabbid76，你的解决方案使用“显示全部”按钮将立方体调整到屏幕上，但它始终具有相同的方向。这不是我要找的。我想将立方体调整到屏幕上，但保留用户使用控件给出的方向。我的意思是，在没有旋转的情况下移动和缩放它以使其居中于屏幕。 - GLR

我在使用Chrome浏览器时无法重现“三个奇怪的事情”中的第3个。您用什么浏览器查看振动物体？ - JohnH

我正在使用 Google Chrome 版本 59.0.3071.115。 - GLR

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- micnil · Accepted Answer

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

这是一个修改后的fiddle。