Procedural 3D Endless Runner Game

This is a Procedural 3D Endless Runner Game. It utilizes Three.js to render a dynamically generated, infinite obstacle course. Its function is to deliver a complete, lane-based gameplay loop entirely within the browser. The environment and actors are constructed procedurally, eliminating external asset dependencies and ensuring instant execution.

Specs

• Weight: ~600 KB (including Three.js library).
• Browser Support: Modern browsers supporting WebGL 2.0 and ES module import maps.

Anatomy

The architecture cleanly separates the WebGL canvas from the DOM-based UI.

• HTML (The Skeleton): A dual-layer structure. The base container hosts the injected WebGL <canvas>, while an absolute-positioned overlay handles the HUD and menus.
• CSS (The Skin): Minimal and functional. It isolates the interactive UI layer using pointer-events: none on the wrapper, explicitly re-enabling them only for actionable buttons to prevent blocking the game view.
• JS (The Nervous System): Operates a continuous requestAnimationFrame loop. It manages the Three.js scene graph, procedural mesh generation, linear interpolation (lerp) for movement, and bounding-box collision detection.

Logic

The defining logic of this snippet is the smooth lane transition via linear interpolation, avoiding jarring snaps during user input.

const targetX = state.lane * CONFIG.laneWidth;
state.currentLaneX += (targetX - state.currentLaneX) * 0.15; // Smooth slide
player.position.x = state.currentLaneX;

This single block calculates the distance to the target lane and closes the gap fractionally every frame. It translates discrete key presses into fluid, continuous motion on the X-axis.

Feel

Inertial yet highly responsive. The character resists instant teleportation, gliding between lanes with calculated weight. The procedural jumping physics and increasing velocity create a tightening loop of tension. The interaction feels tight, grounding the low-poly aesthetics in solid physical rules.