CSS-3D Motion Platform: telemetry visualized
✈️ Full-flight simulators (Level D) ride on massive hexapod motion systems. To monitor these rigs in the Avion Control Engine (ACE), I designed this lightweight 3D rig visualization. It uses absolutely zero WebGL or Three.js—it is entirely driven by native CSS 3D transforms (`rotateX`, `rotateY`, `translateZ`), keeping the frontend bundle minuscule and rendering at native 60fps on any device.
🚀 How it works
Pure CSS 3D: The component is housed in a container with `perspective: 1000px`. The platform elements use `transform-style: preserve-3d`. The central piston uses `translateZ(76px)` to stand up, and the main platform sits on top of it.
Hardware Acceleration: Because the sliders only update the `transform` property of the `motion-platform` element, the browser hands the rendering completely over to the GPU. This avoids layout thrashing and ensures smooth performance even when receiving UDP telemetry packets at 60Hz from the simulator.
Clamped Visuals: Notice that while the sliders (and numerical readouts) allow extreme values, the visual rotation of the platform is clamped to `±25°` using `Math.min()`. This is a UX decision from the ACE platform: it prevents erroneous sensor spikes from flipping the 3D rig completely upside down, ensuring the UI remains readable while still conveying that an extreme motion is occurring.