Euler angles describe an orientation with three ordered rotations. A unit quaternion describes the same orientation with four constrained components. Use Euler angles for editable angle controls. Use quaternions when you need composition or interpolation without an Euler singularity. The choice still requires a coordinate convention.
FindUtils’ 3D Rotation Visualizer compares Euler angles, quaternions, a rotation matrix, and axis-angle values. This guide explains the mathematics and the checks needed before you copy a value into another system.
What Are Euler Angles?
Euler angles describe an orientation through three rotations about specified axes. The convention includes the axis sequence and whether the axes move with the object. Intrinsic rotations use moving axes. Extrinsic rotations use fixed axes. Pitch, yaw, and roll labels depend on the application; they are not universal names for X, Y, and Z.
For example, a control can expose a 30-degree rotation about X and a 45-degree rotation about Y. Applying X then Y generally gives a different orientation from applying Y then X. The three numbers alone do not define a portable orientation.
Euler angles have two useful properties:
- Each value gives an angle that a person can edit.
- Separate angle curves can preserve deliberate turns, such as a complete camera revolution.
They also have two important limits:
- Order dependence: the sequence and reference axes change the result.
- Singularities: at certain orientations, the angle representation cannot distinguish two independent adjustments.
Three distinct axes, such as XYZ, form a Tait–Bryan sequence. Proper Euler sequences repeat the first axis, such as ZYZ. Both belong to the broader family of Euler representations, but their singularity conditions differ.
The Gimbal Lock Problem
For a Tait–Bryan sequence, gimbal lock occurs when the middle angle reaches +90 or -90 degrees. The first and third rotation axes then align. The orientation still exists, but the angle representation loses a unique decomposition.
For a proper Euler sequence, which repeats the first axis, the singular positions occur at a middle angle of 0 or 180 degrees. Do not apply the same ±90-degree rule to every sequence. SciPy documents these angle ranges and its behavior at gimbal lock.
Consider a camera controller that converts every update through Euler angles. Near a singularity, a small orientation change can produce a large jump in the displayed angles. That jump does not necessarily mean the camera made a large physical rotation.
In the FindUtils visualizer, select XYZ, then set Y to 90 degrees. Y is the middle angle for this sequence. Adjust X and Z to examine the loss of independent control. The former instruction to set X to 90 degrees did not demonstrate XYZ gimbal lock.
Using a quaternion removes this representation singularity from orientation storage. It does not remove a mechanical singularity in a robot or fix a camera controller with incorrect constraints.
What Are Quaternions?
A quaternion is a four-component mathematical object written as q = w + xi + yj + zk, where w is the scalar part and (x, y, z) is the vector part. When a quaternion has unit length (w^2 + x^2 + y^2 + z^2 = 1), it represents a rotation in 3D space.
For a unit axis (ax, ay, az) and angle theta in radians, the axis-angle conversion is:
w = cos(theta/2) x = ax * sin(theta/2) y = ay * sin(theta/2) z = az * sin(theta/2)
This representation has several critical advantages over Euler angles:
- No gimbal lock -- quaternions do not pass through a sequential-axis decomposition, so there is no configuration where axes can align and collapse.
- Compact storage -- 4 floats instead of 9 (rotation matrix) or 3+order (Euler).
- Composition -- in exact arithmetic, the product of unit quaternions has unit length. Floating-point calculations can drift, so check the length and normalize when needed.
- Interpolation -- shortest-path SLERP between fixed unit quaternions gives constant angular speed when its interpolation parameter changes linearly.
The downside is that quaternions are unintuitive. Looking at (0.707, 0.0, 0.707, 0.0) does not immediately tell you "90 degrees around the Y axis" the way Euler angles would. An editor can expose angle controls while a runtime uses quaternions for orientation calculations.
Euler Angles vs Quaternions: Comparison
| Property | Euler angles | Unit quaternions |
|---|---|---|
| Representation | Three angles plus a convention | Four components constrained to unit length |
| Direct editing | Useful for axis controls | Raw component edits need care |
| Singularity | Sequence-dependent gimbal lock | No Euler decomposition singularity |
| Composition | Convert or use a convention-specific formula | Quaternion multiplication; order still matters |
| Interpolation | Useful for authored angle curves; path depends on angles | SLERP can follow a shortest orientation path |
| Repeated arithmetic | Watch angle wrapping and singularities | Watch floating-point drift and normalize |
| Complete revolutions | Curves can retain turn counts | An orientation alone does not retain turn counts |
| Exchange between systems | Match sequence, units, axes, and handedness | Match component order, axes, and handedness |
Choose the representation for the operation. A two-axis camera can use constrained Euler controls. A free orientation blend can use quaternions. Neither choice removes the need to test the final motion.
Rotation Matrices and Axis-Angle: The Other Options
Euler angles and quaternions are the most common representations, but two others appear frequently in graphics and robotics.
Rotation Matrices
A 3x3 rotation matrix explicitly describes where each basis vector (X, Y, Z) ends up after the rotation. Under a column-vector convention, each column gives a transformed basis direction. Matrices are the native language of GPUs and physics engines -- vertex shaders apply rotation by multiplying position vectors by a matrix.
Rotation matrices have nine values and compose through matrix multiplication. Element-by-element interpolation does not generally preserve a rotation matrix. Repeated floating-point operations can also reduce orthogonality. Use a suitable rotation interpolation method and restore orthogonality when your numerical method requires it.
Axis-Angle
The axis-angle representation stores a rotation as a unit direction vector (ax, ay, az) and a scalar angle theta. It maps directly to the physical intuition of "rotate this much around this direction" and is closely related to quaternions -- converting between them is a single trigonometric operation.
Axis-angle is useful for:
- Converting an angular velocity vector and a time step into a rotation increment
- User interfaces where "rotate 45 degrees around the up vector" is the natural mental model
- Compact logging and debugging
Both representations are available in FindUtils' 3D Rotation Visualizer, which shows the equivalent rotation matrix and axis-angle pair alongside the Euler and quaternion values.
SLERP: Why Quaternion Interpolation Matters
SLERP interpolates along an arc between unit quaternions. For the shortest orientation path, account for the fact that q and -q represent the same rotation. Negate one endpoint when their dot product is negative. At exactly 180 degrees of relative rotation, the shortest path is not unique.
Why does this matter? Consider animating a camera from orientation A to orientation B:
- Linear interpolation of Euler angles follows the chosen angle curves. It can be useful, but it does not generally follow a shortest orientation path.
- Shortest-path SLERP of unit quaternions provides a predictable orientation blend. Use a linear parameter for constant speed, or an easing function for changing speed.
Animation systems can store Euler curves or quaternion tracks. Their interpolation and blending rules differ. Read the settings for the actual track or API. SLERP is useful for one orientation blend, but it is not a complete animation or robot trajectory planner.
SLERP is also critical for:
- Character animation blending -- smoothly transitioning between walk and run cycles
- Inverse kinematics -- interpolating joint rotations for procedural animation
- Camera systems -- orbiting, following, and cinematographic transitions
- Robotics path planning -- generating smooth joint trajectories
Rotation Conventions in Engines and Formats
An engine name is not enough to define a conversion. An editor control, animation importer, and mathematics library can expose different conventions.
| Source | Documented convention | Check before transfer |
|---|---|---|
| Three.js Euler | XYZ default; angles in radians | Axis order and the library’s intrinsic interpretation |
| Unity Euler conversion | Extrinsic rotations about Z, then X, then Y | Fixed-axis interpretation and Unity’s coordinate system |
| glTF node rotation | Quaternion components in x, y, z, w order | The node can instead use a matrix; preserve its transform context |
See the Three.js Euler reference, Unity rotation manual, and glTF specification.
Quaternions avoid an Euler sequence when storing one orientation. Quaternion multiplication is still order-dependent. A quaternion also does not automatically convert handedness or change the axis basis.
The FindUtils visualizer offers six orders: XYZ, XZY, YXZ, YZX, ZXY, and ZYX. It does not provide a separate switch for intrinsic and extrinsic conventions. Treat engine labels as hints. Check a known rotation in the target engine before you use a copied value.
How to Convert Between Euler Angles and Quaternions
Step 1: Open the 3D Rotation Visualizer
Go to FindUtils' 3D Rotation Visualizer. The tool displays Euler angle sliders, quaternion inputs, the rotation matrix, and axis-angle values -- all synchronized in real time.
Step 2: Set Your Rotation Order
Select the sequence that matches the source mathematics. Check intrinsic versus extrinsic axes separately. The six-order selector does not perform a complete coordinate-system conversion.
Step 3: Enter Your Rotation Values
Type your Euler angle values (in degrees) into the pitch, yaw, and roll fields. The quaternion, rotation matrix, and axis-angle fields update instantly. Alternatively, paste a quaternion and see the equivalent Euler angles.
Step 4: Check for Gimbal Lock
The tool warns you when your Euler angles are near gimbal lock (middle axis near +/-90 degrees). If you see a gimbal lock warning, the Euler-to-quaternion conversion is still correct, but the reverse (quaternion back to Euler) may produce unexpected angle values -- this is expected behavior, not a bug.
Step 5: Export in Your Target Format
Use the Copy Format buttons to export the rotation as Unity C# (Quaternion(x, y, z, w)), Unreal C++ (FQuat(x, y, z, w)), glTF JSON, or CSS rotate3d() syntax. Check the copied component order, axis convention, and precision in the target application before use.
Common Mistakes with 3D Rotations
Mistake 1: Using the Wrong Rotation Order
The same angle values can give different results under XYZ and ZXY conventions. Record axis order, fixed or moving axes, angle units, and handedness with the data. Test a rotation about each axis before testing a combined rotation.
Mistake 2: Forgetting to Normalize Quaternions
Rotation APIs commonly require a unit quaternion. Validate finite components and reject a zero length before normalization: q_normalized = q / |q|. The result of invalid input depends on the implementation; do not assume it always produces a particular distortion. Three.js specifies normalized quaternion inputs.
Mistake 3: Interpolating Euler Angles Directly
Euler interpolation can be smooth, but its path depends on the angle curves and wrapping. Use shortest-path quaternion interpolation when that is the intended motion. Keep explicit angle curves or a turn count when the animation must make complete revolutions.
Mistake 4: Ignoring Gimbal Lock in Animation Curves
Euler curves need deliberate angle wrapping and a suitable sequence. Inspect the motion near the sequence’s singular positions. A rotation greater than 180 degrees is not itself invalid; the important questions are the intended path and the stored turn count.
Mistake 5: Assuming Quaternion Double Cover Does Not Matter
Every 3D rotation corresponds to two quaternions: q and -q (the negation of all four components). Both represent the same rotation. If your code compares quaternions without accounting for this, distance calculations and SLERP can take the long way around (360 minus the intended angle). Always check the dot product of two quaternions before interpolating -- if it is negative, negate one before SLERP.
Tools Used in This Guide
- 3D Rotation Visualizer -- Convert between Euler angles, quaternions, rotation matrices, and axis-angle in real time with gimbal lock detection
- 3D Vector Visualizer -- Visualize 3D vectors and understand the coordinate systems that underpin rotation representations
- 3D Model Viewer -- Inspect glTF/GLB models and verify that exported rotations render correctly in a WebGL viewport
- Unit Converter -- Convert between degrees and radians, which is essential since most rotation math uses radians internally
Frequently Asked Questions
Does a quaternion prevent every rotation error?
No. A unit quaternion avoids Euler gimbal lock during orientation operations. Incorrect axis conventions, multiplication order, units, or interpolation can still produce the wrong result.
Why do the Euler angles change after a round trip?
Different Euler triples can represent the same orientation. A conversion selects one valid range and can discard complete revolutions. Compare the resulting orientation, not only the three angle values.
Does Unity use intrinsic ZXY rotations?
Unity documents extrinsic Z, X, then Y rotations for its Euler conversion. Do not treat that as the same instruction as intrinsic ZXY. Check the target API and coordinate basis.
How many orders does the FindUtils visualizer offer?
The visualizer offers the six distinct-axis orders listed above. It also displays quaternion, matrix, and axis-angle values. It does not expose all proper Euler sequences or a separate extrinsic mode.
Does SLERP always take the short path?
A shortest-path implementation selects compatible signs for the two unit quaternions. Check the implementation. A linear time parameter gives constant angular speed for fixed endpoints; easing changes that speed.
Can a quaternion store a 720-degree spin?
An orientation quaternion cannot distinguish a 720-degree spin from no net rotation. Store the motion or turn count separately when full revolutions matter.
What should I do with a zero quaternion?
Reject it as invalid input for rotation. Its length is zero, so dividing by its length cannot normalize it. Use a documented fallback only when the application explicitly defines one.
Next Steps
Mastering 3D rotations is one piece of the larger 3D math puzzle. To continue building your understanding:
- Explore vector math fundamentals with the 3D Vector Visualizer -- understanding dot products, cross products, and coordinate spaces makes rotation math far more intuitive
- Inspect how rotations are stored in actual 3D assets using the 3D Model Viewer -- load a glTF file and examine the node transforms
- Practice converting angle units between degrees and radians with the Unit Converter -- nearly all rotation APIs use radians internally, and mixing up units is a classic bug source
- Bookmark the 3D Rotation Visualizer for the next time you need to debug a rotation value or convert between engines
