Exploded-View Product Assembly Driven by Scroll

What this builds

A pinned full-viewport Three.js scene where scrolling drives a product model between its assembled state (all parts together) and its exploded state (parts separated along explode vectors to reveal internal structure). The user scrolls to disassemble/reassemble the product, with annotation hotspots appearing at specific explode progress values to label individual parts. The experience reads as an interactive technical diagram brought to life.

• Three.js scene with a GLTF product model whose parts are individually addressable meshes
• Per-part explode vectors computed from part centroids (automatic) or authored (manual override)
• Scroll progress (0-1) maps to explode progress: 0 = fully assembled, 1 = fully exploded
• Camera slowly orbits or drifts during the scroll for perspective variety
• 3-8 annotation hotspots that appear at specific explode stages, labeling parts
• Staged explosion: parts separate in groups (outer shell first, internals second, core last)
• Idle auto-rotate when not scrolling
• Mobile: 2D layered parallax fallback with pre-rendered exploded-view images, or simplified 3D
• prefers-reduced-motion: static side-by-side assembled + exploded images, no 3D