Three.js Scroll Shatter & Assemble — Crystal Debris Effect

The Three.js Scroll Shatter & Assemble snippet starts with ninety glowing crystal fragments flung apart in space and, as the visitor scrolls through a pinned stage, flies every fragment inward until it locks into an exact position and orientation on the surface of an intact icosahedron. Unlike a flat wireframe effect, this one leans on real MeshStandardMaterial shading and multiple point lights so the debris reads as solid, faceted crystal rather than a silhouette.

Deriving fragment targets from a reference geometry

Rather than hand-placing ninety fragments, the snippet builds a throwaway THREE.IcosahedronGeometry purely as a source of face data — it is never added to the scene. For each triangular face, the three vertex positions are averaged into a face center, and that center (plus its normalized "outward" direction) becomes the target position and target orientation for one small THREE.TetrahedronGeometry fragment. This is the same trick used by the scroll particle assembly snippet — sample a reference shape's geometry data to generate per-piece targets — applied here to solid mesh fragments instead of points.

Position AND rotation both need lerping

A shattered object is not just displaced, it is also tumbled — each piece has a random orientation while airborne and a specific, deliberate orientation once seated on the assembled surface. Interpolating position alone would leave fragments sliding into place while still spinning at some random fixed angle, breaking the illusion entirely. The snippet therefore stores both a startQuat and targetQuat per fragment and calls quaternion.slerpQuaternions(startQuat, targetQuat, eased) every frame alongside position.lerpVectors. Quaternion slerp, not a naive linear interpolation of Euler angles, is required here — lerping Euler angles independently produces gimbal-locked, non-uniform rotation speed and can even take the visually wrong short-path/long-path turn, whereas slerp guarantees the shortest, constant-angular-velocity rotation between the two orientations.

Flinging fragments outward, not randomly

Each fragment's scattered starting position is generated by taking its own target's outward direction vector and multiplying it by a large random distance, then adding a small random offset. Flinging pieces outward *along their own final position's radial direction* — rather than to a fully random point in space — makes the shatter read as an explosion centered on the object, which looks physically plausible, instead of a random cloud that happens to coincide with a crystal shape once settled.

Why MeshStandardMaterial and three lights, not flat/wireframe

Wireframe or MeshBasicMaterial looks are cheap but read as flat outlines with no sense of solidity — fine for a tunnel's glowing walls, wrong for debris meant to look like heavy crystal. This snippet uses MeshStandardMaterial with metalness and roughness tuned for a glassy-metallic look, plus flatShading: true so each tetrahedron's facets catch light distinctly rather than smoothing into a sphere. Because a PBR-ish material only reacts to real lights, the scene adds an ambient fill, a violet PointLight as the key light, a cyan PointLight as a rim light from the opposite side, and a soft white DirectionalLight — without those, the fragments would render as flat black shapes no matter how correct their geometry is.

Height-based hue gradient for cohesion

Each fragment's base color and emissive color are derived from a hue computed off its target's Y position (0.68 + center.y / SHAPE_RADIUS * 0.12), giving the assembled crystal a subtle violet-to-cyan gradient from bottom to top rather than every facet being an identical flat color. This mirrors the gradient technique used for particle color in the galaxy formation snippet, adapted here from a radius-based gradient to a height-based one since the target shape is a solid rather than a disk.

Residual spin that fades with progress

To avoid pieces looking like they simply teleport-slide into their slots, each fragment carries a small constant per-frame spin (frag.spin) that is multiplied by (1 - eased) — meaning fragments tumble energetically while far from home and that tumble smoothly damps to zero exactly as they arrive, adding a sense of momentum bleeding off rather than an abrupt stop. Combined with the whole scene slowly orbiting once eased climbs, similar to the reveal rotation in crystal cluster, the finished crystal gets a satisfying weighty settle instead of a mechanical snap.