exploded-view

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

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).

For a GLB, regroup on load: walk the scene, and parent meshes into named part groups by their node names. Preserve world transforms when re-parenting (group.attach(mesh)).

2. Decide how each part moves

Per-part settings live on userData:

housing.userData = { shell: true, stage: 0, explode: [0, 0.32, 0] };   // lifts off first
rotor.userData   = { stage: 2, explode: [0.42, 0, 0] };                // slides out along the shaft last

• explode: [x, y, z] is the offset at full explosion. Without it, the part moves away from the assembly centre (along axis if you pass one to Exploder), scaled by its distance.
• stage orders the motion: stage 0 moves first, and each later stage starts when the previous is half done. Take things apart the way a mechanic would: covers and shells, then fasteners and caps, then the inner parts.
• shell: true marks casings for x-ray and section cuts.

Lay out the exploded state like a technical illustration: one main axis (the shaft, the stack direction), parts spaced so each is clear of its neighbours, large shells moved off-axis (up) so the core stays visible.

const ex = new Exploder(assembly);
ex.set(t);   // 0 assembled .. 1 exploded; ease toward a target each frame for slider input

3. Label the parts

const labels = new Labels(document.querySelector(".labels"), camera, canvas);
labels.add(rotor, "Rotor", { note: "turns in the magnetic field", anchor: [0.03, 0.07, 0] });
// every frame, after renderer.render():
labels.update();

Labels sit in two columns at the screen edges, keep their anchors' vertical order and push apart when they would overlap; a leader line runs from each label to its anchor point. They follow the part as it explodes and hide when the part is hidden or behind the camera. Anchor each label on a point of the part that stays visible from the main view (the top edge, the end of a shaft), in the part's local coordinates.

Style .label, .label b, .label span, .leader and their .focus variants in CSS. On narrow phones, hide the labels and show the hovered or tapped part's name in one caption instead: two columns of labels do not fit beside a model on a 390 px screen.

4. X-ray and section

const xray = new Xray(assembly);      xray.set(true);          // shells to 14% opacity, no depth write
renderer.localClippingEnabled = true;
const section = new Section(assembly, [0, 0, -1]);  section.set(0);   // cut the shells' front half away; null = off

The section plane cuts only shells, so the interior stays whole inside an opened casing, the way a cutaway drawing shows it. Cut materials are made double-sided so the inside of the casing reads.

5. Picking

new Picker(canvas, camera, assembly.children, {
  onHover: (part) => highlightLabelOf(part),
  onPick: (part) => focusOn(part),
});

Hover tints the part's emissive slightly and switches the pointer cursor. A click can isolate the part, fly the camera to it, or open its description.

Camera and framing

• Fit the camera to the assembly for the current screen shape, and let the distance follow the explode amount (the demo's autoDistance): close when assembled, pulled back when exploded. Stop doing it once the visitor zooms or orbits.
• Raise OrbitControls.maxDistance above the fitted distance, or the controls silently clamp it and phones see a crop.
• A three-quarter view slightly from above (the demo uses direction 0.42, 0.34, 1) shows ends and sides of a cylindrical machine at once.

Driving it from scroll

Map scroll progress to ex.set() through keys with holds, as scroll-film does for frames: assembled while the intro reads, explode stage by stage with a caption per stage, hold fully exploded, then section cut. The model is real-time, so the visitor can stop and orbit at any point.

Rendering

Product-shot lighting suits explainers better than a sky: a RoomEnvironment PMREM for reflections, one soft key light with shadows onto a ShadowMaterial floor, ACES tone mapping, and the page's own background colour as the clear colour (an opaque canvas defaults to black). Metals read through roughness 0.3 to 0.45 and metalness 0.8 to 0.95; painted parts through a clearcoat.

Accuracy

If the subject is a real product, use real part names and the real assembly order, and say in the page copy which internal details are illustrative. An explainer that is wrong teaches the wrong thing confidently.