Sequencing Rotations

Transformations

Sequencing Rotations

When you use the rotation method on a mesh, the rotation is applied in local space first around the y axis, then the x axis, and finally the z axis. How, then, do you rotate a mesh around a custom sequence of axes? This involves rotation quaternions, either implicitly or explicitly.

Add Rotation

The simplest way is to use the addRotation method, addRotation(x, y, z), with two zero parameters. For example, both of these code snippets

mesh.addRotation(Math.PI / 2, 0, 0);
mesh.addRotation(0, 0, Math.PI / 3);
mesh.addRotation(0, Math.PI / 8, 0);

mesh.rotation.addRotation(Math.PI / 2, 0, 0).addRotation(0, 0, Math.PI / 3).addRotation(0, Math.PI / 8);

will take the current rotation of the mesh and further rotate it by π/2 about the x axis, then by π/3 about the z axis, and then by π/8 about the y axis.

Using non-zero x, y, and z values with addRotation adds rotations in the order y, x, z.

The internal calculations convert the Euler angles to rotation quaternions and back again.

Sequence using addRotation: Sequence Rotations Using addRotation

Rotate

Imagine a disc with an axis through its center. The disc is able to rotate about the axis. The image below shows the disc at several different rotation points around the axis.

Expand

For all rotations of the disc the axis can be tilted as seen in the diagram below.

Expand

Specifying a direction vector for an axis along with an angle is an alternative way to produce a rotation. This is how the rotate method is used, either in world space or local space.

import { Space } from "@babylonjs/core/Maths/math.axis";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
mesh.rotate(new Vector3(1, 0 - 1), Math.PI / 3, Space.WORLD);

import { Space } from "@babylonjs/core/Maths/math.axis";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
mesh.rotate(new Vector3(1, 0 - 1), Math.PI / 3, Space.LOCAL);

Three useful vectors are predefined:

import { Axis } from "@babylonjs/core/Maths/math.axis";
Axis.X;
Axis.Y;
Axis.Z;

The rotate method is also additive. For example, this code

import { Axis, Space } from "@babylonjs/core/Maths/math.axis";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
mesh.rotate(new Vector3(2, -3, 7), Math.PI / 3, Space.LOCAL);
mesh.rotate(Axis.Y, -Math.PI / 2, Space.WORLD);
mesh.rotate(new Vector3(5.6, 7.8, -3.4), 1.5 * Math.PI, Space.WORLD);
mesh.rotate(Axis.Z, -Math.PI, Space.LOCAL);

will start with the current orientation of the mesh, then add a rotation of π/3 about the given local space axis, followed by a rotation of -π/2 about the world y axis, then a rotation of 1.5π about the given world axis, and finally a rotation of -π about the local z axis.

Examples

Earth rotates on tilted axis: Earth Rotating On A Tilted Axis Using mixed rotate World and Local: Using Mixed Rotate World and Local Two cubes one rotates in World Space other in Local Space: 2 Cubes Rotating in World and Local Space Purple rotates in World Space, brown Local Space: Purple and Brown rotation in World and Local Space

The use of rotate sets the orientation of the mesh using a rotation quaternion and subsequently there can then be issues trying to set the orientation of the mesh using rotation.

It is now time to look more closely at rotation quaternions.