Three.js 相机向上或向下倾斜并保持地平线水平 [英] Three.js camera tilt up or down and keep horizon level

问题描述

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

camera.rotate.y pans left or right in a predictable manner.

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

camera.rotate.x looks up or down predictably when camera.rotate.y is at 180 degrees.

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

but when I change the value of camera.rotate.y to some new value, and then I change the value of camera.rotate.x, the horizon rotates.

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

I've looked for an algorithm to adjust for horizon rotation after camera.rotate.x is changed, but haven't found it.

推荐答案

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

In three.js, an object's orientation can be specified by its Euler rotation vector object.rotation. The three components of the rotation vector represent the rotation in radians around the object's internal x-axis, y-axis, and z-axis respectively.

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

The order in which the rotations are performed is specified by object.rotation.order. The default order is "XYZ" -- rotation around the x-axis occurs first, then the y-axis, then the z-axis.

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

Rotations are performed with respect to the object's internal coordinate system -- not the world coordinate system. This is important. So, for example, after the x-rotation occurs, the object's y- and z- axes will generally no longer be aligned with the world axes. Rotations specified in this way are not unique.

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

So, for example, if in code you specify,

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

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

the rotations are applied in the object's rotation.order, not in the order you specified them.

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

In your case, you may find it more intuitive to set rotation.order to "YXZ", which is equivalent to "heading, pitch, and roll".

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

For more information about Euler angles, see the Wikipedia article. Three.js follows the Tait–Bryan convention, as explained in the article.

three.js r.61

three.js r.61

这篇关于Three.js 相机向上或向下倾斜并保持地平线水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！