Three.js 相机上下倾斜并保持水平

Posted 2023-02-27

【中文标题】Three.js 相机上下倾斜并保持水平

【英文标题】：Three.js camera tilt up or down and keep horizon level

【发布时间】：2013-07-05 06:31:27

【问题描述】：

camera.rotate.y 以可预测的方式向左或向右平移。

camera.rotate.x 在 camera.rotate.y 处于 180 度时可预测地向上或向下看。

但是当我将 camera.rotate.y 的值更改为某个新值，然后我更改 camera.rotate.x 的值时，地平线会旋转。

我一直在寻找一种算法来调整 camera.rotate.x 更改后的水平旋转，但没有找到。

【参考方案1】：

我这几天一直在寻找相同的信息，诀窍是：使用常规 rotateX 向上/向下查找，但使用 rotateOnWorldAxis(new THREE.Vector3(0.0, 1.0, 0.0), angle) 进行水平转弯 (https://discourse.threejs.org/t/vertical-camera-rotation/15334)。

【参考方案2】：

在three.js中，一个对象的方向可以通过它的欧拉旋转向量object.rotation来指定。旋转矢量的三个分量分别表示围绕对象内部 x 轴、y 轴和 z 轴的弧度旋转。

执行旋转的顺序由object.rotation.order 指定。默认顺序是“XYZ”——首先绕 x 轴旋转，然后是 y 轴，然后是 z 轴。

相对于对象的内部坐标系执行旋转，而不是世界坐标系。这个很重要。因此，例如，在 x 旋转发生后，对象的 y 轴和 z 轴通常将不再与世界轴对齐。以这种方式指定的旋转不是唯一的。

因此，例如，如果在您指定的代码中，

camera.rotation.y = y_radians;  // Y first
camera.rotation.x = x_radians;  // X second
camera.rotation.z = 0;

旋转应用于对象的rotation.order，而不是按照您指定的顺序。

在您的情况下，您可能会发现将rotation.order 设置为“YXZ”更直观，相当于“航向、俯仰和滚动”。

有关欧拉角的更多信息，请参阅Wikipedia article。 Three.js 遵循 Tait-Bryan 约定，如文章中所述。

three.js r.61

【讨论】：

您的评论有效。在相机对象初始化时，我添加了以下代码行，camera.eulerOrder = "YXZ";

现在是camera.rotation.order = 'YXZ';

您的意思不是“偏航、俯仰和滚动”吗？ :)