Rotation
In Babylon.js, the rotation of a mesh defines its orientation in 3D space, determining how the mesh is turned or angled along the X, Y, and Z axes. By modifying a mesh’s rotation, you can control the direction it faces and how it appears within the scene. Each axis corresponds to a particular rotation:
- X-axis rotation tilts the mesh forward or backward.
- Y-axis rotation turns the mesh left or right (around its vertical axis).
- Z-axis rotation rolls the mesh from side to side (like a wheel turning).
Rotation Vectors and Angles
Rotation in Babylon.js is typically handled with Euler angles or quaternions, depending on your use case. Euler angles are expressed as three separate values corresponding to rotations around the X, Y, and Z axes, while quaternions are a more complex mathematical approach that avoids problems like gimbal lock.
Euler Angles
Euler angles represent rotation as three distinct angles: pitch (X), yaw (Y), and roll (Z). These angles are typically used when rotating an object around the X, Y, or Z axes individually, but combining them can lead to complex behaviors like gimbal lock.
Quaternions
A quaternion is a mathematical construct that avoids gimbal lock by representing 3D rotation in a four-dimensional space. Babylon.js can use quaternions internally to handle rotations more smoothly, especially when combining multiple rotations.
Rotations Modes
In Babylon.js, rotation modes determine how an object’s rotation is applied, and which coordinate system (local or world) the rotation is relative to. These modes provide flexibility in controlling how an object rotates within a scene. The two primary rotation modes are Local Rotation and World Rotation.
Local Rotation
Local rotation refers to the rotation of an object relative to its own local coordinate system. This means that the object rotates around its own axes (X, Y, Z) rather than the global scene axes.
Local Axes: Each object in a 3D scene has its own set of axes (local axes), and these axes are typically oriented with respect to the object’s geometry and transformations. For example, an object might have a local X-axis that runs along its length, a local Y-axis that runs upwards, and a local Z-axis that runs forward.
What happens during Local Rotation? When you apply local rotation to an object, the rotation occurs with respect to the object’s own axes, independent of the scene’s global axes. If the object is rotated, its local axes will also rotate, which can affect subsequent transformations.
World Rotation
World rotation, on the other hand, applies rotation relative to the world’s (global) coordinate system, or the scene’s axes. This means that the object rotates around the global X, Y, and Z axes of the scene, which are fixed and unaffected by the object’s own rotation.
Global Axes: The global coordinate system is fixed, meaning the world’s axes (X, Y, and Z) do not change based on the object’s position or orientation in the scene. For instance, rotating an object around the global Y-axis will always affect its position in the same way, regardless of the object’s previous rotation.
What happens during World Rotation? When you apply world rotation, the object rotates relative to the world’s axes, and its rotation does not depend on its local orientation. For example, if you rotate an object around the global Y-axis, the object rotates in the scene without any consideration for its current orientation in the local coordinate system.
Learn More
For a comprehensive understanding, please refer to rotations sections of Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/mesh/transforms/center_origin/.
