Three.js Scroll Planet Approach — GSAP Orbit Arrival

The Three.js Scroll Planet Approach snippet flies the camera from deep space into a close orbit around a procedurally colored planet, with GSAP's ScrollTrigger scrubbing a single 0–1 progress value that every other quantity — camera distance, swing angle, atmosphere glow, and a live distance HUD — is derived from each frame. It is the "arrival" counterpart to the starfield warp: instead of racing past stars forever, the scroll ends in a stable orbit around a destination.

A textureless planet painted per-vertex

The planet needs continents, oceans, and polar ice, but downloading an equirectangular texture would make the snippet depend on an external image. Instead, the sphere's vertices are colored directly: each vertex normal is fed into a cheap trigonometric noise expression (sin/cos products at different frequencies), and the result thresholds into land green or ocean blue, with anything above 0.86 on the Y axis painted ice white. Because MeshLambertMaterial supports vertexColors, the GPU interpolates smoothly between vertices and the 96-segment sphere reads as soft-edged continents with zero network requests.

Atmosphere and clouds without shaders

The atmosphere rim is the classic budget fresnel trick: a second sphere 7% larger than the planet rendered with side: THREE.BackSide, so only its far hemisphere's inside faces draw, producing a halo that hugs the limb. Its opacity is tied to scroll progress — barely visible from deep space, glowing at 0.38 opacity once you arrive — which sells the sensation of entering the atmosphere's optical thickness. Clouds are a third shell using the same vertex-color trick but with AdditiveBlending and depthWrite: false, rotating slightly faster than the surface so the planet feels alive even when the user stops scrolling.

Distance easing shaped for a braking burn

Mapping scroll linearly to distance would make the final moments feel abrupt — most of the planet's apparent growth happens in the last few units of approach. The snippet instead applies 1 - Math.pow(1 - p, 2.2) to the scrubbed progress, so distance closes quickly while the planet is small and flattens out near arrival, mimicking a deceleration burn. This is the same derive-from-one-value philosophy used in the portal gate sequence: ScrollTrigger scrubs one number, and the frame loop shapes it.

A swinging approach vector, not a straight line

Flying straight at a sphere is visually static — the silhouette just grows. The camera's position is computed on a circle whose angle advances 2.1 radians across the scroll, so the approach corkscrews a third of the way around the planet and the day/night terminator sweeps across the visible face during descent. Combined with an inclined moon whose orbital angle also advances with progress, there is always parallax between foreground and background to communicate motion.

Scroll-scrubbed but never frozen

Only the approach itself is scroll-driven. Planet rotation, cloud drift, the moon's base orbit, and a subtle sinusoidal camera bob all run off THREE.Clock elapsed time, so the scene keeps breathing when scrolling stops — the same split between scrubbed primary motion and clock-driven secondary motion used in the scroll camera path snippet. Scrolling back up reverses the entire arrival exactly, because nothing is fired one-shot; every visual state is a pure function of the current progress value and the clock.