You are an expert Frontend Web Developer and 3D Graphics Eng...

Prompt

You are an expert Frontend Web Developer and 3D Graphics Engineer. Your task is to generate a complete, fully functional, and visually impressive 3D driving game featuring the Tesla Roadster. The entire game must be contained within a single, self-contained HTML file using Three.js. Do not use external assets (like external .gltf, .obj, or texture images); instead, procedurally generate the car model, track, and environment using Three.js primitives and materials, or use Data URLs/Canvas-generated textures if necessary. --- ### CONTEXT: WHAT IS THE TESLA ROADSTER? Because your training data might have limitations regarding this specific vehicle, here is the exact specification of the car you are building: The 2nd-generation Tesla Roadster is an all-electric, all-wheel-drive supercar. It features a sleek, aerodynamic, low-profile body design, a glass roof (removable targa top), and a distinctive minimalist interior with a futuristic steering yoke. Key performance metrics to simulate in the gameplay and UI: - Acceleration: 0–60 mph in 1.9 seconds (it is incredibly fast and responsive). - Top Speed: Over 250 mph (400 km/h). - Powertrain: Three electric motors (one front, two rear). - Special Feature: "SpaceX Package" options which include cold-gas thrusters. We want to include a "Rocket Boost" mechanic in this game representing this package. --- ### GAMEPLAY MECHANICS & REQUIREMENTS 1. Tech Stack & Architecture: - Use Three.js (import via unpkg CDN). - Use Tailwind CSS or pure CSS via CDN for a sleek UI overlay. - Include a basic physics loop inside a `requestAnimationFrame` loop (handling velocity, acceleration, friction, turning radius, and boundary collisions). - The entire application must be in ONE single `.html` file. 2. The Vehicle (Tesla Roadster Model): - Procedurally build a low-profile, aerodynamic sports car using groups of Three.js meshes (`THREE.BoxGeometry`, `THREE.CylinderGeometry`, etc.). - Paint it a glossy, metallic signature electric red or minimalist metallic silver/grey. - Give it 4 distinct wheels that rotate relative to the vehicle's speed and turn slightly left/right when steering. - Add glowing LED headlights (white) and a sleek continuous horizontal taillight bar (red) on the rear. - Add a subtle particle emitter or light trail trailing the car to signify high-tech electric power. 3. Controls: - WASD or Arrow Keys for driving (W/Up to accelerate, S/Down to reverse/brake, A/D or Left/Right to steer). - SPACEBAR to activate the "SpaceX Rocket Boost". When held, this rapidly increases acceleration beyond normal limits, consumes a "Thruster Fuel" meter, and triggers an intense blue/white particle flame effect from the rear of the car. 4. The Environment & Track: - Generate a futuristic, neon-lit cyberpunk highway or a scenic coastal California highway (matching Tesla’s roots). - The track should have clear boundaries. If the player hits the guardrails, they should bounce back and lose velocity. - Scatter glowing collectible energy orbs along the track to replenish the "Thruster Fuel". 5. Camera System: - Implement a smooth third-person chase camera that follows slightly behind and above the Roadster, lagging dynamically behind acceleration to give a true sense of immense speed. 6. User Interface (HTML/CSS Overlay): - Speedometer: Displays current speed in MPH (scaling up to 250+ mph). - Thruster Fuel Gauge: A depletion bar showing remaining SpaceX boost energy. - Distance/Score Counter: Tracking how far the player has traveled. - Game States: A minimalist "Start Game" overlay with a title and instructions, and a "Game Over" or "Pause" screen. Deliver the absolute cleanest, production-ready, error-free HTML code possible. Ensure all event listeners, resizing handlers, and animation loops are perfectly optimized. Begin directly with the HTML code block.

A system prompt was added to support web rendering