three.js Orbit 相机控制加滚动（如 Blender）答案

【问题标题】：three.js Orbit camera control plus roll (like Blender)three.js Orbit 相机控制加滚动（如 Blender）
【发布时间】：2017-07-22 01:50:44
【问题描述】：

轨道控件很棒，但它们的限制是 Y 轴总是在屏幕上指向上方。

我想在相机上添加一个“滚动”并在绕行时保留它。如果我更改 camera.up 向量，它将添加一个滚动，但是当我围绕对象运行时，滚动向量的外观会发生变化。例如如果它开始在屏幕上向左倾斜，当我绕到另一侧时，camera.up 不会改变，但它现在在屏幕上向右倾斜。

我注意到这正是相机在 Blender 中的工作方式，每张截图。

知道如何在threejs中实现这一点吗？

（加分项：在 Blender 中，轨道控制也能够继续在球体顶部平稳运行，而 three.js 中的轨道控制卡在球体顶部。很高兴知道也）

【问题讨论】：

我怀疑一种方法是动态计算需要什么 camera.up 来给出特定的屏幕向上方向并在每一帧应用它，类似于 stackoverflow.com/a/34209101/1767169 但 camera.up 变化，不固定.
查看代码，了解如何在 Blender 中处理 Orbit 和 Trackball，github.com/BSVino/Blender/blob/…
您是否希望相机始终围绕 Y 轴旋转但让相机倾斜以使其不水平？如果是这样，为什么？你的用例是什么？
是的@WestLangley，没错。我想保持 Orbit 控制器的直观性和精确性，以便对齐 3D 场景以匹配照片。保持围绕 Y 轴的旋转意味着用户始终知道轨道会做什么，而无需考虑向上方向会产生什么影响。搅拌机中的轨道和轨迹球控件似乎更复杂......创建使用搅拌机方法/数学的新控制器是否有用？
这是你的意思吗？ jsfiddle.net/ar5rfydj

标签： three.js

【解决方案1】：

TrackballControls for threejs 做你想做的事：Y 轴并不总是向上，你可以在顶部环绕。

【讨论】：

感谢您的回复，但轨迹球的不幸行为总是改变屏幕上的方向。我希望能够在屏幕上设置向上方向并在轨道运行期间保持固定。有一种方法可以锁定轨迹球的摄像头向上方向（请参阅stackoverflow.com/a/34209101/1767169），但这仍然会导致在轨道运行时屏幕上的向上方向发生变化，即使摄像头向上方向没有改变。（如原帖中所述：固定的摄像头向上方向仍会根据其他属性导致不同的屏幕向上方向）

【解决方案2】：

您可以使用OrbitControls 并使用如下模式“倾斜”相机：

var tilt = Math.PI / 8;
camera.rotation.order = 'YXZ';

在您的动画循环中，执行以下操作：

controls.update();
camera.rotation.z = tilt;

之所以有效，是因为将rotation.order 设置为YXZ，OrbitControls 设置的相机方向具有camera.rotation.z = 0。所以在这种情况下，改变它并没有什么坏处。

three.js r.86

【讨论】：

太棒了！此外，在将其转换为与 z-up 相机一起使用后，我相信可以使用 camera.rotateZ(tilt) 来简化此操作，无论旋转顺序如何，只要它在轨道控制器计算后仅应用一次。