“A Quaternion is a 4-dimensional hypercomplex number (w + xi + yj + zk) representing 3D spatial rotation as an axis vector and rotation angle. Unlike 3-angle Euler representations, quaternions never suffer from Gimbal Lock (axis collapse) and support smooth, constant-speed spherical linear interpolation (SLERP).”
Eliminate Gimbal Lock and achieve smooth spherical linear interpolation (SLERP) using 4D hypercomplex quaternions.
// Smooth Quaternion SLERP in Three.js
const targetQuaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 2);
function animate() {
// Interpolate smoothly towards target orientation
currentObject.quaternion.slerp(targetQuaternion, 0.05);
}Define arbitrary 3D rotation axis unit vector [Vx, Vy, Vz]
Compute half-angle theta = angle / 2
Form quaternion: Q = [cos(theta), Vx*sin(theta), Vy*sin(theta), Vz*sin(theta)]
Multiply quaternions to combine consecutive rotations without matrix drift
Interpolate between two orientations using SLERP: Q_interp = slerp(Q_start, Q_end, alpha)
SLERP provides constant-velocity angular motion, preventing jarring visual acceleration artifacts in head and hand tracking.