Three.js camera tilt up or down and keep horizon level

Question

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.

Answer 1

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

Answer 2

I've been looking for the same info for few days now, the trick is: use regular rotateX to look up/down, but use rotateOnWorldAxis(new THREE.Vector3(0.0, 1.0, 0.0), angle) for horiz turn (https://discourse.threejs.org/t/vertical-camera-rotation/15334).