Keyboard Controls:
Roll: Q / E | Pitch: W / S | Yaw: A / D
Reset: R
Made with ♥ by JCPC
An affine transformation preserves points, straight lines, and planes. In 3D graphics, linear rotations are combined with translation vectors into a single transformation model.
The total rotation applied to the aircraft is determined by combining three separate rotation matrices for each Cartesian axis, Roll $(\alpha)$ around $x$-axis, Pitch $(\beta)$ around $y$-axis, and Yaw $(\gamma)$ around $z$-axis:
$$\mathbf{R}_x(\alpha) = \begin{pmatrix} 1 & 0 & 0 \\ 0 & \cos\alpha & -\sin\alpha \\ 0 & \sin\alpha & \cos\alpha \end{pmatrix}$$ $$\mathbf{R}_y(\beta) = \begin{pmatrix} \cos\beta & 0 & \sin\beta \\ 0 & 1 & 0 \\ -\sin\beta & 0 & \cos\beta \end{pmatrix}$$ $$\mathbf{R}_z(\gamma) = \begin{pmatrix} \cos\gamma & -\sin\gamma & 0 \\ \sin\gamma & \cos\gamma & 0 \\ 0 & 0 & 1 \end{pmatrix}$$Using the default intrinsic $XYZ$ Euler order, the final $3 \times 3$ rotation matrix $\mathbf{R}_{XYZ}$ shown on the panel is calculated by multiplying these three matrices sequentially:
$$\mathbf{R}_{XYZ} = \mathbf{R}_x(\alpha) \cdot \mathbf{R}_y(\beta) \cdot \mathbf{R}_z(\gamma)$$
Note: This interactive 3D visualization is rendered using Three.js.