Three.js Scroll City Flyover — GSAP Night Skyline Camera

The Three.js Scroll City Flyover snippet takes the visitor from street level up over a low-poly night skyline as they scroll, banking and climbing the whole way, by pairing dozens of instanced-style THREE.BoxGeometry buildings with a single scrubbed progress value driven by GSAP's ScrollTrigger. Unlike the scroll tunnel, which threads a fixed curve, this scene is an open 3D city where the camera's start and end positions are simply two points that get interpolated and reshaped as scroll progress changes.

Buildings as boxes, not models

Every building is a plain THREE.BoxGeometry with randomized width, depth, and height, positioned in loosely staggered "blocks" that step backward along Z. There is no imported 3D model and no GLTF loader — the low-poly aesthetic is a deliberate choice, not a limitation, because flat-shaded boxes read clearly as a skyline silhouette from a distance while staying cheap enough to instantiate two hundred-plus of them without a frame hitch. Twenty-six blocks spaced ninety units apart give the camera a runway long enough that structures are always visible ahead, no matter how far the scroll has progressed.

Windows from a canvas texture, not an image file

Rather than shipping a window sprite as a static asset, the snippet draws one procedurally with the 2D Canvas API: a 128×128 grid of cells, each randomly left dark or filled with a warm or cool lit square, wrapped into a THREE.CanvasTexture with RepeatWrapping. Generating it in code means zero network requests, an easy knob to change the lit-window ratio or color balance, and a texture that tiles seamlessly across buildings of any size by adjusting repeat per mesh. A second, slightly larger box wraps each building body using this texture on an unlit MeshBasicMaterial, so the windows glow independent of scene lighting rather than needing an emissive map baked per building.

Two-mesh buildings instead of a custom shader

Each building is actually two overlapping meshes: an opaque MeshStandardMaterial body that receives the hemisphere and directional "moon" light, and a transparent window shell rendered just outside it. This sidesteps writing a custom shader to mix a lit body color with emissive window squares — two draw calls per building is a simple, debuggable trade that still reads correctly from any camera angle because the shell is only a fraction of a percent larger than the body.

One progress value drives climb, drift, and look target

A single flight.t value scrubs from 0 to 1 across the pinned stage, exactly like the pattern used in the scroll tunnel and scroll camera path snippets. Position is a straight lerpVectors between a low street-level start and a high rooftop-clearing end, but the vertical component is additionally smoothstepped through a separate climb curve so the rise reads as a takeoff arc rather than a diagonal line. A sine-based sideways drift, scaled by that same climb value, adds a gentle bank that only kicks in once the camera has real altitude to bank at.

Fog and background color locked together

FogExp2 uses the identical hex value as scene.background, the same technique as the tunnel snippet, so the far end of the city dissolves into open sky rather than hitting a visible draw-distance wall. This is what makes twenty-six blocks feel like an endless metropolis instead of a finite diorama with an edge.

Light streaks recycle instead of respawn

Sixty points drift past the camera to sell speed at altitude, where the buildings alone cross the frame too slowly to convey motion once the camera is high above the rooftops. Each frame nudges every streak's Z forward by a fixed amount and wraps it back by cityDepth once it passes the camera, so the same sixty-point BufferGeometry never needs particles added or removed — only one small typed-array write per frame. Pair this with a digital grid pulse HUD overlay or a starfield warp intro section for a fuller "descending into the city" scroll sequence.