3D Rotation Matrix Primer

3D Rotation Matrix Primer

When you rotate a point (x, y, z) in 3D space, you are applying a transformation that changes its coordinates while keeping its distance from the origin the same. This transformation is done using a rotation matrix.

---

1. Rotation about the x-axis (angle α)

Rotation around the x-axis keeps x fixed and rotates the (y, z) plane.

(x', y', z') = ( x, y·cos(α) − z·sin(α), y·sin(α) + z·cos(α) )

---

2. Rotation about the y-axis (angle β)

Rotation around the y-axis keeps y fixed and rotates the (x, z) plane.

(x', y', z') = ( x·cos(β) + z·sin(β), y, −x·sin(β) + z·cos(β) )

---

3. Rotation about the z-axis (angle γ)

Rotation around the z-axis keeps z fixed and rotates the (x, y) plane.

(x', y', z') = ( x·cos(γ) − y·sin(γ), x·sin(γ) + y·cos(γ), z )

---

4. Combining rotations

To rotate a point around all three axes, we combine the rotations. The standard order used in our Desmos cube system is:

R = Rz(γ) → Ry(β) → Rx(α)

That means:

1. First rotate around the x-axis by α,
2. Then around the y-axis by β,
3. Finally around the z-axis by γ.

The order matters — rotations in 3D are not commutative.

---

5. Full rotation formula

After combining all three rotations, the new coordinates (x', y', z') of a rotated point (x, y, z) are given by:

x' = (cos(β)·cos(γ))·x + (sin(α)·sin(β)·cos(γ) − cos(α)·sin(γ))·y + (cos(α)·sin(β)·cos(γ) + sin(α)·sin(γ))·z

y' = (cos(β)·sin(γ))·x + (sin(α)·sin(β)·sin(γ) + cos(α)·cos(γ))·y + (cos(α)·sin(β)·sin(γ) − sin(α)·cos(γ))·z

z' = (−sin(β))·x + (sin(α)·cos(β))·y + (cos(α)·cos(β))·z

These equations are the same as the rotation matrix, but expressed in coordinate form so they render cleanly in HTML.

---

6. Important properties

• Rotation preserves distance: (x² + y² + z²) = (x'² + y'² + z'²)
• Rotation preserves angles between vectors.
• det(R) = 1, meaning this is a pure rotation (no reflection).
• Rotations can be animated using sliders for α, β, and γ.

---

7. Workflow for 3D scenes (Desmos or any engine)

1. Define the original vertices (x, y, z) of your 3D object.
2. Rotate each vertex using the equations above.
3. Project the rotated points onto a 2D plane using your projection formula.
4. Use dot products with face normals to determine which faces are visible (occlusion).
5. Draw only the visible faces.

This is how every 3D engine works — rotation → projection → occlusion → render.

---

8. Summary

• α rotates around x-axis
• β rotates around y-axis
• γ rotates around z-axis
• Rotations can be combined to achieve any orientation in 3D
• All transformations preserve shape and distance

@mathematics.proofs