arcadeBiking
“Act as a senior WebGL and Three.js game engine engineer. Provide a clean, robust, and performant architectural implementation for a stylized 3D cycling game set in Sicily, Italy, built with modern Three.js (r160+ using ES modules) and Rapier3D (WASM). ### 1. Game Concept & Aesthetic - Setting: Coastal Sicily (winding asphalt roads along cliffs, Mount Etna smoking in the background, olive groves, terracotta roofs, cobalt Mediterranean sea). - Art Style: Vibrant low-poly or stylized cell-shaded look, warm Mediterranean daylighting, volumetric fog, and soft shadow mapping. - Core Loop: The player rides a road bicycle along a scenic looped or chunked spline road, managing cadence/stamina, coasting downhill, carving turns, and passing scenic landmarks (e.g., Taormina, Valley of the Temples, Etna foothills). ### 2. Core Architecture & Modules Structure the code into modular ES6 classes or clean object-oriented managers: 1. `GameEngine` - Setup WebGLRenderer (toneMapping: ACESFilmicToneMapping, outputColorSpace: SRGBColorSpace, shadows enabled). - Dynamic window resize handling with fixed aspect ratio correction. - Core game loop (`requestAnimationFrame`) utilizing delta time (`THREE.Clock.getDelta()`) capped to prevent spiral-of-death tunneling. 2. `BicycleController` & Physics - Arcade-realistic hybrid physics: * Acceleration / Cadence (W/Up Arrow): Gradually increases forward velocity up to a gear-dependent max speed. * Braking / Reverse (S/Down Arrow): Applies friction and decelerates. * Steering (A/D or Left/Right Arrow): Rotates handlebars and induces visual bicycle banking/lean (Z-axis roll) proportional to speed and turn radius. * Freewheel / Coasting: Natural aerodynamic drag and rolling resistance slowing the bike when no keys are pressed. * Elevation adjustment: Bike pitches up/down smoothly matching road incline/gradient. - Collision detection using Rapier3D (or Raycasting down to the road mesh) to stick the wheels strictly to the road normal and elevation. 3. `CameraRig` - Smooth 3rd-person chase camera (Lerp dampening) following behind and slightly above the cyclist. - Dynamic FOV expansion when traveling at high speeds or descending steep hills. - Subtle camera shake on gravel/rough patches and look-ahead yaw matching steering direction. 4. `Track & World Generation` - Roadway: Procedural path generated using `THREE.CatmullRomCurve3` with `ExtrudeGeometry` or `TubeGeometry` shaped like an asphalt coastal road with road markings. - Terrain: Heightmapped or chunked low-poly mesh around the track, with blue water plane below cliff level (`MeshStandardMaterial` with subtle sine-wave vertex displacement). - Scenery Instancing: Use `THREE.InstancedMesh` for olive trees, cypress trees, stone walls, and street lamps along the roadside to ensure steady 60+ FPS. - Background Landmark: Distant low-poly Mount Etna with a rising particle-based smoke plume (`THREE.Points`). 5. `HUD & Audio Integration` - Minimalist DOM overlay (HTML/CSS): Speedometer (km/h), Incline Grade (%), Distance Traveled (km), and a Stamina meter. - Web Audio API / Synthesized sound: Ambient sea breeze & cicadas, bicycle chain ticking sound pitch-scaled to cadence, and wind noise tied to velocity. ### 3. Deliverable Requirements - Write clean, modular, and fully functional vanilla JavaScript/Three.js code. - Avoid deprecated APIs (e.g., do NOT use `THREE.Geometry`, use `THREE.BufferGeometry`). - Keep code self-contained or cleanly separated with exact ESM import URLs from `esm.sh` or `unpkg`. - Include key mathematical formulas (banking angle calculation, speed decay, and tangent alignment along the curve).”
