The presented tool is based on WebGL and three.js. It is used to efficiently visualise the relations between coordinates and Euler’s angles in 3D space.

Requirements

The tool is implemented in client-side JavaScript only. It requires a browser that natively supports WebGL and Canvas renderers. All the scripts are processed with Hugo’s safeJS function to prevent exploitation of the JavaScript renderer’s vulnerabilities.

Interactive renderer

■ X■ Y■ Z (up) ■ ghost = initial pose drag to orbit · scroll to zoom

Position

Initial Euler  extrinsic X-Y-Z

Additional rotation Δ  body frame, extrinsic X-Y-Z

Rotate local frame  cumulative, body frame

X 0°
Y 0°
Z 0°

Final Euler (extrinsic X-Y-Z) after Δ + frame rot.

roll — pitch — yaw —

Quaternion (w, x, y, z)

w=— x=— y=— z=—

This visualisation tool is developed by Alexander Titov, PhD using Claude.ai, and adapted for Hugo template processor by twdragon. The unchanged, incomplete source code is published on Gitlab.com