Three.js Scroll Rocket Launch — Stage Separation Scrub

The Three.js Scroll Rocket Launch Sequence snippet flies a two-stage rocket from a rumbling launch pad to orbit in one scroll: ignition shake, an accelerating boost climb, booster separation with a tumbling fall-away, an upper-stage relight, and a sky that darkens from dawn blue to starfield black as altitude accrues. GSAP's ScrollTrigger scrubs one flight value; a phase table carves it into the mission timeline.

A mission profile, not an animation timeline

The scroll is divided the way real launches are: pre-launch below 8%, boost to 58%, a five-point separation window, then the orbit burn. Each frame classifies the scrubbed value against these fractions and derives phase-specific behavior — rumble amplitude, thrust level, which nozzle emits, HUD phase text. Because classification happens per frame from one value (rather than chained tweens firing), scrubbing backwards flies the mission in reverse: the booster re-attaches, the sky re-lightens, the rumble returns. The quadratic altitude curve alt² × 190 makes the climb accelerate like a vehicle burning off mass, opposite to the braking curve of the planet approach.

Stage separation via group hierarchy

The rocket is a Group containing two child groups — booster and upper stage. Before separation both inherit the parent's climb; after it, the booster's *local* position and rotation animate away (falling on its own quadratic, drifting sideways, tumbling 1.8 radians) while the parent group keeps climbing with the upper stage. No re-parenting, no world-matrix surgery: the separation is two local transforms diverging inside one hierarchy, the same leverage the exploded view uses for its chips.

Exhaust with lifetimes, gated by thrust

The plume is 500 recycled particles, each with a life value that wraps at 1. On rebirth, a particle respawns at the *currently active* nozzle — booster bottom before separation, upper-stage bottom after — but only if thrust exceeds 0.15; otherwise it parks at y = −9999. This spawn-gating means the plume naturally dies during the separation coast and re-ignites for the orbit burn, with no particle-system on/off switch: the thrust scalar is the only control. A flickering point light at the nozzle (intensity thrust × (2.2 + sin(40t) × 0.5)) lights nearby geometry with engine glow.

Sky-to-space is one lerp driving three systems

Altitude normalizes into a darkness value that simultaneously lerps the background color, re-colors the fog to match (the halo-avoidance rule from the ocean dive), and fades in a 900-point starfield that only becomes visible past 35% darkness. One derived scalar keeps the three systems in perfect sync — no way for stars to appear in a blue sky.

A chase camera with phase awareness

The camera reads like launch coverage: low and looking up at the pad, pulling alongside during boost (its Y tracks 96% of rocket altitude so the vehicle slowly outruns it), then drifting wider and higher as space arrives. Its look-at target switches from the booster's midsection to the upper stage after separation, keeping the active vehicle framed while the spent booster tumbles out of shot. The ignition rumble is a 60 Hz sine on the rocket's X position, amplitude-enveloped by the pre-launch window — a cheap, effective shake that also feeds the exhaust spawn origin. For the descent-flavored sibling of this scene, see the staircase climb; for city-scale flyover framing, the city flyover.