HomeGeometryQuaternion Rotation — Axis-Angle & Slerp Explorer

📐 Quaternion Rotation — Axis-Angle & Slerp Explorer

Explore how quaternions represent 3D rotation without gimbal lock. Set an axis and angle, watch the live quaternion components, blend orientations with spherical linear interpolation (slerp), and see gimbal lock happen with Euler angles.

Geometry3DAdvanced60 FPS
quaternion-rotation ↗ Open standalone

About this simulation

This tool visualises a quaternion, the four-component number q = w + xi + yj + zk that mathematicians and engineers use to represent 3D rotation without the singularities of Euler angles. Set an axis and angle to build a rotation directly, watch its quaternion components update live, blend smoothly between two saved orientations with spherical linear interpolation, or switch to the Gimbal-lock demo to see exactly how Euler angles can lose a degree of freedom.

🔬 What it shows

A coloured cube with red/green/blue axis arrows is rotated by setting its quaternion directly from an axis (normalised from the X/Y/Z sliders) and an angle, via w = cos(θ/2) and (x,y,z) = sin(θ/2)·axis. The live stats box always shows the current w, x, y, z components to four decimal places.

🎮 How to use

Drag the Axis X/Y/Z and Angle sliders to reorient the gizmo. Click “Set as Orientation A” and “Set as Orientation B” to capture two poses, then “Play Slerp” to animate a smooth blend between them with no jumps. Toggle Gimbal-lock demo mode to drive the same gizmo with Pitch/Yaw/Roll Euler angles instead, and watch the gimbal lock risk indicator flip to HIGH near ±90° pitch.

💡 Did you know?

Gimbal lock is not a simulation glitch — it is a real mechanical and mathematical phenomenon that affected Apollo-era spacecraft gimbals. Quaternions were discovered by William Rowan Hamilton in 1843 while walking along Dublin’s Royal Canal, and he was so excited he carved the fundamental formula i²=j²=k²=ijk=−1 into the stone of Broom Bridge.

Frequently asked questions

What is a quaternion?

A quaternion is a four-component number of the form q = w + xi + yj + zk, where w is the scalar (real) part and x, y, z form the vector (imaginary) part. A unit quaternion, where w²+x²+y²+z²=1, can represent any 3D rotation: the vector part encodes the rotation axis and the scalar part encodes half the rotation angle.

How do you build a quaternion from an axis and an angle?

Given a unit rotation axis (x, y, z) and an angle θ, the rotation quaternion is w = cos(θ/2) and the vector part is sin(θ/2) multiplied by the axis. This axis-angle to quaternion conversion is exactly what the Axis X/Y/Z and Angle sliders in this simulation compute in real time.

What is gimbal lock and why do quaternions avoid it?

Gimbal lock happens when using Euler angles (pitch, yaw, roll) and one rotation axis lines up with another, so two of the three rotational degrees of freedom collapse into one, permanently losing the ability to rotate independently around one axis. Quaternions avoid this because they represent orientation as a single point on the surface of a 4D unit sphere, with no separate axes that can ever become aligned or degenerate.

What does slerp do and why not just interpolate the numbers directly?

Slerp (spherical linear interpolation) blends two orientation quaternions along the shortest arc on the 4D unit sphere, producing rotation at a constant angular speed with no jumps or distortion. Linearly interpolating the raw w, x, y, z numbers instead would leave the sphere’s surface, requiring renormalisation and producing uneven, non-constant-speed rotation.

Where are quaternions used in the real world?

Quaternions are the standard way to track orientation in 3D graphics engines, video games, robotics, drones, spacecraft attitude control and virtual reality headsets, because they are compact, numerically stable, free of gimbal lock, and interpolate smoothly — all properties that make them preferable to rotation matrices or Euler angles for real-time orientation tracking.

⚙ Under the hood

Explore how quaternions represent 3D rotation without gimbal lock. Set an axis and angle, watch the live quaternion components, blend orientations with spherical linear interpolation (slerp), and see gimbal lock happen with Euler angles.

mathrotationquaternions3d-graphicsinterpolationalgorithmsThree.js

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)