Three.js相机向上或向下倾斜并保持地平线水平

Question

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

当camera.rotate.y处于180度时，

camera.rotate.x可预测地向上或向下查看。

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

我已经找了一个算法来调整camera.rotate.x之后的地平线旋转，但还没有找到它。

Answer 1

在three.js中，对象的方向可以通过其Euler旋转向量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

Answer 2

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