1. The sphere itself is a sine/cosine tuple

Every vertex of the mesh, and n itself, is generated directly from spherical coordinates, $$n = (\cos\varphi\cos\theta,\ \cos\varphi\sin\theta,\ \sin\varphi)$$ the exact 3-D generalization of the $(\cos\theta,\sin\theta)$ pair the Unit Circle traces in 2-D. Drag θ and n sweeps a circle of latitude at constant elevation; drag φ and it sweeps a meridian from pole to pole. Two independent angles, two true degrees of freedom — exactly enough to reach every point on the sphere.

2. Two controls, one vector

The polar controls (θ, φ) and the rectangular boxes (x, y, z) are two views of the same 2 degrees of freedom, kept in sync in both directions: drag a slider and the numbers update; type new numbers and they're renormalized back onto the unit sphere before θ/φ are recovered from them via $\varphi=\arcsin(z),\ \theta=\operatorname{atan2}(y,x)$. Neither representation is more "real" than the other — they're the same state, read out two ways.

3. x, y and z are already the direction cosines

Because n is unit length, its rectangular components are literally the cosines of the angles it makes with each axis — $n_x=\cos\angle\hat X$, and so on. The component box makes this a visible construction: three axis-aligned edges laid end to end, origin → $(x,0,0)$ → $(x,y,0)$ → $(x,y,z)$, so each edge's length is exactly $|n_x|$, $|n_y|$ or $|n_z|$, anchored on its own labeled axis.

4. One vector, one plane

Any unit normal defines a plane through the origin, and the live equation $n_x x + n_y y + n_z z = 0$ is exactly that. The shaded disc is that plane clipped to the sphere; each plane preset aligns n with a coordinate axis, which is what makes its plane coincide with a coordinate plane (n = $\hat Z$ reduces the equation to $z=0$, the XY-plane itself).

5. Composing three elemental rotations

Each slider builds one elemental rotation matrix within a coordinate plane:

• $\alpha$ rotates in the YZ-plane (about $\hat X$): $R_x(\alpha)=\begin{bmatrix}1&0&0\\0&\cos\alpha&-\sin\alpha\\0&\sin\alpha&\cos\alpha\end{bmatrix}$
• $\beta$ rotates in the XZ-plane (about $\hat Y$): $R_y(\beta)=\begin{bmatrix}\cos\beta&0&\sin\beta\\0&1&0\\-\sin\beta&0&\cos\beta\end{bmatrix}$
• $\gamma$ rotates in the XY-plane (about $\hat Z$): $R_z(\gamma)=\begin{bmatrix}\cos\gamma&-\sin\gamma&0\\\sin\gamma&\cos\gamma&0\\0&0&1\end{bmatrix}$

They compose as $R=R_z(\gamma)\,R_y(\beta)\,R_x(\alpha)$ — $\alpha$ is applied first, $\gamma$ last — and the order matters: 3-D rotations do not commute, so multiplying the same three matrices in another order generally gives a different R. Every one of R's 9 entries is a product of sines and cosines of the three angles; each slider's mini 3×3 grid shows its own block in isolation. The dashed "generative triangles" carry the Unit Circle construction through R: each plane's cos leg and sin leg build the point its slider currently traces on its ring.

6. Why dragging α never lights up column 1

Multiplying out shows column 1 of R (where $\hat X$ lands) is $(\cos\gamma\cos\beta,\ \sin\gamma\cos\beta,\ -\sin\beta)$ — a function of $\beta$ and $\gamma$ only. $R_x(\alpha)$ fixes $\hat X$ by construction, so a rotation confined to the YZ-plane can never move a vector that starts on the X axis. The matrix-cell highlight is computed from this exact dependency; $\beta$, in the middle of the product, is the only slider that reaches all 9 cells.

7. One axis, one angle: Euler's rotation theorem

However R was built, it is always a single rotation by some angle $\psi$ about some fixed axis $\hat n$. The angle falls out of the trace, $\text{tr}(R)=1+2\cos\psi$, and the axis out of R's antisymmetric part: $R-R^{\mathsf T}=2\sin\psi\,[\hat n]_\times$, so $\hat n \propto (R_{32}-R_{23},\,R_{13}-R_{31},\,R_{21}-R_{12})$. The readout and the dashed magenta line are computed from the live R, not from $\alpha$, $\beta$, $\gamma$. Two cases need care: at $\psi=0$ (R is the identity) no axis is defined, and at $\psi=180°$ the antisymmetric part vanishes, so the axis is read off the diagonal of $\tfrac12(R+I)=\hat n\hat n^{\mathsf T}$ instead.

8. Gimbal lock, shown rather than described

Three "rotate within a plane" sliders are Euler angles, and Euler angles have a well-known failure: when the middle rotation $\beta$ reaches $90°$ or $270°$, $R_x(\alpha)$ and $R_z(\gamma)$ end up turning about the same physical axis. A degree of freedom collapses — $\alpha$ and $\gamma$ start doing the same thing. Drag $\beta$ to $90°$ to see it; the callout that appears teaches the limitation instead of hiding it.

9. Color-coding the three principal planes

The three rings are the rotated images of the YZ-, XZ- and XY-plane great circles — an armillary-sphere view of exactly the planes the sliders rotate within, each colored to match its control. The sphere's own surface is a single flat fill with no shading, so color means exactly one thing: "this is a principal plane, and this is the control that moves it."

10. Two numbers, then three

A direction needs two numbers (θ, φ); an orientation needs three (α, β, γ). The extra one is spin about the arrow: point a camera at a target and you have fixed its direction, but it can still roll about its line of sight. Euler's theorem says the same thing another way — an orientation is an axis $\hat n$ (a direction: two numbers, a point on the Direction explorer's sphere) plus one angle $\psi$ (the third number).

11. A rotation matrix is three direction-cosine vectors

Column $j$ of R is where axis $j$ lands, and every column is a unit vector — exactly the kind of n the Direction explorer shows, with direction cosines as its entries. The three columns are also perpendicular to each other, which is why R has 9 entries but only 3 degrees of freedom: once two columns are chosen at right angles, the third is forced.

12. The pole and gimbal lock are the same problem

At the north pole the azimuth θ stops meaning anything — every θ gives the same arrow. At $\beta=90°$, α and γ stop being independent. Both are coordinate singularities: the angles break down, not the geometry. No pair of angles can cover the whole sphere without such a point, and no triple of angles can cover every orientation without one, which is why flight software, game engines and robotics store orientations as matrices or quaternions and use angles mainly for display.

13. Pedagogical flow

1. In the Direction explorer, start at the default (n = Ẑ) and read the plane equation: exactly $z=0$, the XY-plane.
2. Drag θ alone: at the pole nothing moves — straight up has no azimuth. Click "Tilt" and drag θ again: now n sweeps a circle of latitude.
3. With "Tilt" selected, check the component box: three different-length edges, each anchored on its own axis.
4. Type a non-unit vector into x/y/z (e.g. 2, 2, 2) and watch it snap back to unit length — direction kept, magnitude discarded.
5. In the Rotation explorer, reset and move only $\alpha$: column 1 of R never changes. Reset, then move only $\beta$: every cell changes.
6. Turn on "Basis vectors" alone: the X′/Y′/Z′ triad tilts as one rigid unit — at every moment it is R's three columns.
7. Drag $\beta$ to $90°$ and nudge $\alpha$ and $\gamma$ in turn: they now spin the sphere about the same axis (gimbal lock) — the same failure as θ at the pole.