City Roller 3D Trendy Web Game

City Roller 3D Trendy Web Game

City Roller 3D is built using Three.js (WebGL framework) for real-time 3D rendering. The game utilizes a frame-independent update loop and a modular approach to object management, separating the physics proxies from the visual meshes.

Rolling Physics & Input

The movement system uses a combination of constant linear velocity and leaped lateral positioning. The “rolling” effect is achieved by rotating the player mesh based on its traveled distance.

Procedural Level Generation Levels are generated via the generate Level function, which populates the scene based on a linear Z-axis progression.

Technical Performance To maintain 60FPS on high-density displays:

Mesh Recycling: The game purges existing meshes using scene.remove() and array truncation. Draw Call Reduction: All track segments share a single geometry and material instance. Collision Gating: Collisions are only checked for objects within a narrow Z-range