How do I build rotations from an axis and angle using a quaternion?

Building rotations from an axis and angle using a quaternion involves a few key mathematical steps. A quaternion, often represented as q = w + xi + yj + zk, or [w, x, y, z], is a powerful tool for handling rotations in 3D space without encountering issues like Gimbal Lock. Here's how you can achieve this:

1. Understanding the Components:

- Axis (vector): Represents the direction around which the rotation occurs. This needs to be a normalized vector (length of 1).

- Angle (scalar): Represents the magnitude of the rotation in radians.

- Quaternion: A 4D number system used to represent rotations.

2. The Formula:

The formula to convert an axis and an angle into a quaternion is as follows:

Given a rotation axis (normalized) \( \vec{u} = [u_x, u_y, u_z] \) and a rotation angle \( \theta \), the quaternion components are:

\( w = \cos(\frac{\theta}{2}) \)

\( x = u_x \sin(\frac{\theta}{2}) \)

\( y = u_y \sin(\frac{\theta}{2}) \)

\( z = u_z \sin(\frac{\theta}{2}) \)

Thus, the quaternion \( q = [w, x, y, z] \) represents the desired rotation.

3. Implementation (Conceptual JavaScript):

Here’s a conceptual JavaScript function that demonstrates the conversion:

function createQuaternionFromAxisAngle(axis, angle) {
  // Ensure axis is normalized (length = 1)
  const axisLength = Math.sqrt(axis[0] axis[0] + axis[1] axis[1] + axis[2] axis[2]);
  const normalizedAxis = axis.map(component => component / axisLength);

  const halfAngle = angle / 2;
  const sinHalfAngle = Math.sin(halfAngle);
  const cosHalfAngle = Math.cos(halfAngle);

  const w = cosHalfAngle;
  const x = normalizedAxis[0] sinHalfAngle;
  const y = normalizedAxis[1] sinHalfAngle;
  const z = normalizedAxis[2] sinHalfAngle;

  return [w, x, y, z];
}

- Usage:

const rotationAxis = [1, 0, 0]; // Rotation around X-axis
const rotationAngle = Math.PI / 2; // 90 degrees in radians
const quaternion = createQuaternionFromAxisAngle(rotationAxis, rotationAngle);
console.log("Quaternion:", quaternion); // Output the quaternion components

4. Important Notes:

- Normalization: Always ensure your axis vector is normalized before using it in the calculation.

- Radians: Angles must be in radians for most trigonometric functions.

- Libraries: For more complex or production-level applications, use a dedicated library such as THREE.js (for 3D rendering), or a math library that provides quaternion functionality (e.g., gl-matrix in WebGL).

- Applying the Rotation: The resulting quaternion is used to rotate points and vectors. Specific operations depend on the library or environment you are using (e.g., quaternion multiplication, transformation matrices).

In summary, this process converts an axis-angle rotation into a quaternion representation, which is crucial for performing rotations in 3D without issues related to Euler angles or Gimbal lock.

Learn more about this