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

Posted 2023-02-27

【中文标题】three.js - 相机变化的非常奇怪的行为

【英文标题】：three.js - really strange behaviour with camera changes

【发布时间】：2018-02-19 12:34:27

【问题描述】：

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

在我的应用程序中，我渲染了一个立方体，我可以更改为顶视图（使用 TOP VIEW 按钮），我可以使用 SHOW ALL 将立方体调整为屏幕 按钮。然而，我注意到了三件奇怪的事情：

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

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

如果我通过单击 TOP VIEW 按钮设置顶视图，并在释放鼠标左键之前进行拖动，控件似乎变得疯狂。这些物体一直以一种非常奇怪和恼人的方式振动。

我对@9​​87654324@ 很陌生，我无法弄清楚为什么会发生这三件事。任何解决这些问题的帮助或建议将不胜感激，谢谢。

【问题讨论】：

我不明白你对第 1 点的意思。你不想改变相机的方向吗？你用function ShowAll()中的camera.lookAt(look_at_position);行明确告诉它

我做了一些实验，但还没有得出任何结论。我同意这种行为很奇怪。也许我还没有完全理解代码，但你甚至需要在SetTopView() 中调用_reset_controls_after_camera_movement() 吗？删除该行后似乎工作正常。还发现了一个关于 OrthographicTrackballControls 的reset() 方法的开放bug report。也许这可能会导致奇怪的行为......

@micnil 在第 1 点，我的意思如下。使用 SHOW ALL 按钮，我想将对象置于屏幕的中心，无论其当前方向如何。使用我的代码，按下该按钮后立方体会“旋转”（当我按照第 1 点所述进行操作时）。更准确地说，旋转的是相机，而不是立方体。

@Rabbid76 您的解决方案使用 SHOW ALL 按钮将立方体调整到屏幕上，但它始终具有相同的方向。那不是我要找的。我想将立方体调整到屏幕上，但保留用户使用控件给出的方向。我的意思是，移动和缩放它以使其在屏幕中居中，但不旋转。

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

【参考方案1】：

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

这是modified fiddle

【讨论】：

太棒了！非常感谢！