Three.js Scroll Asteroid Belt — InstancedMesh Dodge Run

The Three.js Scroll Asteroid Belt Run snippet flies the camera on a weaving, banking path through 320 tumbling asteroids — every rock a single InstancedMesh instance, so the whole field costs one draw call — with "gate" asteroids seeded deliberately close to the flight path that flash hot and increment a NEAR MISSES counter as the camera threads them. GSAP's ScrollTrigger scrubs the camera's Z; the corridor, the banking, and the drama are all construction-time guarantees.

One draw call for the whole field

Rendering 320 individual Mesh objects means 320 draw calls and 320 scene-graph nodes. InstancedMesh submits one geometry, one material, and a buffer of per-instance matrices — the GPU stamps the rock 320 times in a single call. Each frame the loop recomposes every matrix through a shared Object3D dummy (position from placement, rotation from clock-time tumble, scale from seed) and flags instanceMatrix.needsUpdate. With DynamicDrawUsage hinting the driver that this buffer changes every frame, the field animates as cheaply as a particle system while remaining fully lit, shadowed, solid geometry. The base rock itself is a DodecahedronGeometry with seeded per-vertex radial jitter, so instances read as debris rather than dice.

A corridor guaranteed at construction

Dodge-field scenes fail when a rock happens to spawn on the flight path. Here the path is two analytic functions — pathX(z) and pathY(z), sums of incommensurate sines that weave without repeating — and every asteroid is placed *relative to the path at its own Z*: a random angle around the centerline at a radius of at least 6.5 units of clearance. The corridor is therefore flyable by construction, no collision testing ever needed. The 12% of rocks flagged as gates get clearance 3.4 instead — close enough to feel dangerous, still outside the camera's envelope. Threat placement is a parameter, not luck.

Banking sells the steering

A camera translated along a curve looks like it is being dragged; a camera that *banks* looks like it is flying. The roll angle is the numerical X-derivative of the path — (pathX(z−1) − pathX(z+1)) × 0.09 — so the camera leans into every turn exactly as hard as the turn demands, with look-at aimed 14 units down-path. One derivative turns a slide into a cockpit, the first-person sibling of the bridge crossing's footstep bob.

Near-misses with scrub-safe counting

Gate rocks within 6 units of the camera tint hot orange via setColorAt — per-instance color, still one draw call — and increment the counter once per pass. The counted flag re-arms only when the camera retreats fully above the gate, so oscillating mid-pass cannot double-count, and scrolling back up genuinely re-arms the gates for another run. It is the honest-counter philosophy of the portal gate sequence adapted to stateful counting on a scrubbed axis.

Fog as density illusion

FogExp2 matched to the background makes rocks materialize gradually out of the dark ahead — the belt feels endless although only 320 rocks exist across 480 units, the same budget-infinity trick as the scroll tunnel. Star dust points scattered through the corridor depth supply parallax between rock encounters. For the physics-flavored cousin where the field reacts to you, see magnetic particles; for the warp-speed version with no obstacles, starfield warp.