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"更直观，相当于heading, pitch, and roll".

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屋！