Three.js Scroll Hologram Scan — Clipping Plane Reveal

The Three.js Scroll Hologram Scan Reveal snippet materializes a rotating torus-knot "artifact" above a pedestal emitter, sliced open by a glowing scan line that rides upward with scroll — and unlike most scan effects, the slice is real: a THREE.Plane clipping plane whose constant GSAP's ScrollTrigger scrubs directly, so geometry below the line renders and geometry above it is mathematically cut away by the GPU.

Real clipping, not opacity tricks

Most "scan reveal" effects fade a whole object in, or mask it in 2D. This snippet enables renderer.localClippingEnabled = true (clipping is silently ignored without the flag — the classic gotcha) and assigns clippingPlanes: [clipPlane] to the hologram materials. The plane's normal is (0, −1, 0), which makes a fragment survive when y ≤ constant — meaning the plane's constant literally *is* the scan height, and the GSAP tween scrubs that constant from below the knot to above it. The cut edge is razor-sharp and follows every fold of the torus knot's surface, something no fade or mask can do.

Three copies of one geometry

The artifact is one TorusKnotGeometry rendered three times: a clipped translucent Phong fill with cyan emissive (the "light volume" of the hologram), a clipped brighter wireframe overlay (the structural lines that read as projection), and an unclipped 6%-opacity ghost wireframe. The ghost is the storytelling layer — above the scan line you faintly see what is *detected but not yet rendered*, giving the reveal a destination. All three share the same rotation values each frame, so the clip boundary stays coherent across copies while the artifact turns like a museum piece.

A scan line you can see

Clipping alone leaves a hollow cross-section but no visible beam. An open-ended, thin cylinder (CylinderGeometry with openEnded: true) rides at exactly the clip height, pulsing opacity on a 9 Hz sine — the visible manifestation of the invisible plane. It hides itself at the extreme ends of the range so no stray ring floats before the scan starts or after it completes. Rising additive-blended sparkle motes recycle through the scan column (the wrap-don't-respawn pattern from the ocean dive bubbles), brightening as the scan progresses.

Electrical flicker sells the projection

Holograms in film language flicker. Here two incommensurate sines are multiplied — sin(23t) × sin(7.3t) — and only when the product exceeds 0.93 do the fill and wireframe opacities briefly dip to 30%. The threshold on a product of unrelated frequencies produces irregular, unpredictable dropouts a single sine could never give, at the cost of one line of code. The emitter ring's HSL lightness also breathes with time and warms with progress, tying pedestal to projection.

Scroll as the scanner

Because the scrubbed value is the clip constant itself, the interaction is honest: scrolling *is* scanning, pausing leaves a partial render with a live cross-section through the knot's tubes, and scrolling up de-renders the artifact top-down. The HUD percentage is a normalization of the same value. The technique generalizes to any mesh — swap the torus knot for a loaded product model and this becomes a product viewer with a manufacturing-scan intro, or pair it with the exploded view for a full sci-fi teardown sequence.