Rotation in ThreeJS

Rotation requires a little more care than translation or scaling. There are several reasons for this, but the main one is the order of rotation matters. If we translate or scale an object on the X-axis, Y-axis, and Z-axis, it doesn’t matter which axis goes first.

these three rotations may not give the same result:

Rotate around X-axis, then around the Y-axis, then around the Z-axis.

Rotate around Y-axis, then around the X-axis, then around the Z-axis.

Rotate around Z-axis, then around the X-axis, then around the Y-axis.

Representing Rotations: the Euler class#

Euler Angles are represented in three.js using the Euler class. As with .position and .scale, an Euler instance is automatically created and given default values when we create a new scene object.

// when we create a mesh...

const mesh = new Mesh();

// ... internally, three.js creates a Euler for us:

mesh.rotation = new Euler();

As with Vector3, there are .x, .y and .z properties and a .set method:

mesh.rotation.x = 2;

mesh.rotation.y = 2;

mesh.rotation.z = 2;

mesh.rotation.set(2, 2, 2);

Once again, we can create Euler instances ourselves:

import { Euler } from 'three';

const euler = new Euler(1, 2, 3);

Euler Rotation Order

By default, three.js will perform rotations around the X-axis, then around the Y-axis, and finally around the Z-axis, in an object’s local space. We can change this using the Euler.order property. The default order is called ‘XYZ’, but ‘YZX’, ‘ZXY’, ‘XZY’, ‘YXZ’ and ‘ZYX’ are also possible.

The Unit of Rotation is Radians

The Other Rotation Class: Quaternions#

The second, which we’ll mention only in passing here, is the Quaternion class. Along with the Euler, a Quaternion is created for us and stored in the .quaternion property whenever we create a new scene object such as a mesh:

// when we create a mesh

const mesh = new Mesh();

// ... internally, three.js creates an Euler for us:

mesh.rotation = new Euler();

// .. AND a Quaternion:

mesh.quaternion = new Quaternion();

We can use Quaternions and Euler angles interchangeably. When we change mesh.rotation, the mesh.quaternion property is automatically updated, and vice-versa. This means we can use Euler angles when it suits us, and switch to Quaternions when it suits us.

Euler angles have a couple of shortcomings that become apparent when creating animations or doing math involving rotations. In particular, we cannot add two Euler angles together (more famously, they also suffer from something called gimbal lock). Quaternions don’t have these shortcomings. On the other hand, they are harder to use than Euler angles, so for now we’ll stick with the simpler Euler class.

or now, make a note of these two ways to rotate an object:

Using Euler angles, represented using the Euler class and stored in the .rotation property.

Using Quaternions, represented using the Quaternion class and stored in the .quaternion property.

References:

https://discoverthreejs.com/book/first-steps/transformations/