Euler Angle Visualizer

An interactive tool for understanding Euler angles — the rotation order, the axis convention, and the active/passive · intrinsic/extrinsic split, side by side in real time.

Live demo → binue97.github.io/EulerAngleVisualizer

Using the demo

Open the link, move the sliders, and watch the rotation, the body axes, and the rotation matrix update together. Everything runs in the browser — no install.

In the controls panel you can configure:

• Axis convention — 24 spatial conventions (FLU, FRD, RDF, RUB, …).
• Mode — Active or Passive.
• Composition — Intrinsic or Extrinsic.
• Rotation order — all 12 Tait–Bryan (XYZ, ZYX, …) and proper-Euler (ZYZ, XYX, …) sequences.
• Angles — α, β, γ via sliders, with a Clear button to reset to zero.

Each 3D scene also has viewpoint presets (Top, Front, Side, 3D) and a Sync View toggle that mirrors the left camera into the right scene.

The math panel has two tabs, both rendered with KaTeX:

• Matrix composition — the full derivation from your angles to the final rotation matrix, updating as you drag.
• Matrix decomposition — type in any rotation matrix and read the (α, β, γ) angles back out, with notes on the principal range of β and gimbal lock.

Run locally

Requires Node.js 18+.

git clone https://github.com/binue97/EulerAngleVisualizer.git
cd EulerAngleVisualizer
npm install
npm run dev

Built with

React · Three.js · react-three-fiber · drei · leva · KaTeX · Vite

License

MIT © B.NU