Three.js Synthwave Terrain — Infinite Retro Wireframe Grid Landscape

The Three.js Synthwave Terrain snippet recreates the retro-futuristic wireframe landscape aesthetic — a glowing pink grid stretching to a foggy horizon under a gradient sun — using two seamlessly-looping wireframe planes, exponential fog, and a canvas-drawn sprite texture, all with core Three.js loaded from a CDN and zero external image assets.

Two tiles, not one endless plane

Rendering a genuinely infinite terrain would require regenerating geometry forever, which isn't practical. Instead, the snippet builds exactly two identical wireframe grid tiles, placed back-to-back along the Z axis. Every frame, both tiles move slightly toward the camera; the moment either tile has traveled a full tile-length past the camera, its Z position snaps backward by *two* tile-lengths — placing it immediately behind its partner again, invisible to the viewer since it happens off-screen at the far end of the fog. This two-tile relay is the standard, cheap technique behind endless-scrolling roads, rivers, and terrain in countless games and demos.

The height field comes from the same sine-wave technique as water

Before the scrolling animation ever starts, each grid's vertices are displaced once using Math.sin(x * freq) + Math.cos(z * freq) — the exact same overlapping-wave technique used in the particle wave snippet, just applied once to build a static rolling-hills shape rather than recalculated every frame for a moving ripple. Because both tiles run through the identical height formula, their edges match up perfectly where they meet, with no visible seam or height mismatch at the boundary.

Exponential fog does the atmospheric heavy lifting

THREE.FogExp2 fades objects toward the fog color based on an exponential falloff with distance, rather than the more clinical linear fog. This is what makes the wireframe grid's far edge dissolve smoothly into the background instead of appearing to end abruptly at a hard clipping line — and it's also doing double duty by visually hiding the exact moment each tile snaps back into position at the far end of the scene.

A sun sprite drawn with 2D canvas, not an image file

The glowing sun is a THREE.Sprite — a flat, camera-facing quad — textured with a CanvasTexture built from a plain 2D <canvas> radial gradient (warm center fading through pink to fully transparent). This is a genuinely useful technique beyond this one snippet: any soft glow, particle sprite, or gradient billboard in Three.js can be generated on the fly this way, entirely in JavaScript, with no image file to host or load.

Wireframe as an aesthetic choice, not a debugging leftover

Setting wireframe: true on a MeshBasicMaterial is often used for debugging geometry — here it's the entire point. Combined with a saturated magenta color and additive-feeling transparency, the wireframe grid reads immediately as the classic retro-computer-graphics look associated with 1980s synthwave album art and film title sequences.

A tilted, fixed camera, not a free-look one

The camera never moves or rotates on its own beyond a small fixed downward tilt set once at startup — the *illusion* of forward motion comes entirely from the grid tiles scrolling toward the camera, not from the camera actually traveling through space. This is a cheaper and more controllable approach than moving the camera along a path, since the terrain's motion speed is the only variable that needs adjusting.

Where this technique extends

The two-tile relay-scroll pattern generalizes to any endless-terrain effect — rivers, roads, star tunnels, or infinite corridors. Pair this snippet with a starfield warp for a full synthwave "drive into space" sequence, or contrast its retro wireframe aesthetic against the smooth, lit surface of the particle wave.