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

问题描述

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

camera.rotate.x在camera.rotate.y处于可预测状态时向上或向下查找180度。

但是当我将camera.rotate.y的值更改为某个新值时，然后我更改了camera.rotate.x的值

我已经找到一个算法来调整camera.rotate.x更改后的水平旋转，但没有找到它。

$在three.js中，一个对象的方向可以通过它的Euler旋转向量来指定 object.rotation c>。旋转矢量的三个分量表示分别围绕对象的内部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



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

three.js r.61

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

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

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.

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

解决方案

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.

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.

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;

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

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

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摄像机向上或向下倾斜并保持水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！