Three.js Scroll Exploded View — GSAP Product Teardown

The Three.js Scroll Exploded Product View snippet builds a stylized phone from five stacked slabs — frame, battery, logic board, display, cover glass — and lets scroll peel them apart into a classic engineering exploded view, then orbit the camera 150° around the separated stack. It is the teardown counterpart to the turntable-style product stages snippet: instead of rotating a finished object through poses, scroll deconstructs it.

A device from slabs, not a downloaded model

Loading a real GLTF phone model would tie the snippet to an asset URL and a loader. Instead each layer is one BoxGeometry slab with MeshStandardMaterial tuned per layer — matte dark aluminium for the frame, teal for the battery, PCB green for the board, and a 35%-opacity low-roughness slab for the cover glass, whose transparency lets the display show through when assembled. Eight small chip boxes are parented directly to the logic-board mesh, so they explode with their parent automatically — a reminder that Three.js scene-graph parenting is the cheapest way to move sub-parts in lockstep.

Uneven explode offsets read as engineering

Each layer stores both an assembled Y and an exploded ey target, and the exploded spacings are deliberately uneven (−6.5, −2.6, 1.2, 4.8, 8.2). Evenly fanned layers look like a deck of cards; real exploded diagrams give heavy structural parts more separation than thin films. Storing explicit per-layer targets rather than computing index × spacing is what makes that art direction possible.

Top-down peel via per-layer progress offsets

Rather than all five layers separating simultaneously, each layer's local progress is the global explode value offset by (layerCount − 1 − index) × 0.08 — so the cover glass lifts first, then the display, and the frame drops away last. It is the same hand-rolled reversible stagger used in the Rubik's cube assembly: because the offset math is a pure function of one scrubbed value, scrolling up reassembles the device bottom-up in perfect mirror order.

A two-phase scrub: explode, then inspect

The single scrubbed progress splits at 0.55 — the first 55% drives the eased explode, the remainder sweeps the camera 2.6 radians around the exploded stack while pulling slightly closer and higher. Splitting derived phases from one value (rather than chaining two ScrollTriggers) guarantees the handoff cannot drift and the reverse scroll un-orbits before it reassembles, mirroring the phase design in the planet approach.

A label that names the focused layer

The HUD label reads ASSEMBLED at rest and EXPLODED — 5 LAYERS at completion, but mid-scrub it indexes into the layer list by Math.floor(explode × layerCount), naming each component as the peel reaches it: cover glass, display panel, logic board, battery, frame. Deriving the label from the same progress value keeps text and 3D perfectly synchronized with zero event wiring — the approach HTML overlays should always take in scrubbed scenes, and one that pairs naturally with pinned text patterns like scroll pin steps if you want longer annotations beside the canvas.