exploded-view
Installation
SKILL.md
Exploded view
People understand a machine when they see it come apart in the order it was put together, with each part named where it sits. This skill does that in the browser: parts slide apart along sensible lines, outer shells go ghostly or get cut open, and labels follow their parts without ever sitting on top of the model.
Tools
| File | What it does |
|---|---|
assets/explode.js |
Exploder (staged explode), Labels (pinned labels with leader lines), Xray, Section (clipping plane through shells), Picker (hover and click) |
assets/demo/ |
A complete page: a code-built induction motor taken apart, with sliders, x-ray and section. ?explode=1, ?cut=1, ?xray=1 set the state |
Requires three.js (r169 in the demo's import map). Build the model with threejs-scene techniques or load a GLB.
Build
1. Structure the model as parts
The unit of an exploded view is a part: a Group that moves as one. Make every part a direct child of one assembly group, and give each part its own materials (x-ray and hover change materials; shared ones would change every part at once).