3D Racing Game is an immersive 3D car racing game developed using JavaScript and Three.js as part of a Computer Graphics project. Race against CPU-controlled opponents, manage your fuel consumption, and aim for the best lap times while avoiding collisions.
- 3D Rendered Environment: Beautifully designed race track with desert terrain, mountains, trees, and dynamic clouds
- Realistic Car Physics: Acceleration, deceleration, and turning mechanics with speed limitations
- Multiple Camera Views: First-person and third-person camera perspectives (toggle with 'C' key)
- CPU Opponents: Race against four AI-controlled cars with different speeds and paths
- Fuel Management System: Collect fuel cans around the track to maintain your vehicle's fuel level
- Health System: Avoid collisions to maintain your car's health
- Dynamic Lighting: Realistic lighting with shadows for immersive gameplay
- Interactive UI: Real-time speedometer, fuel gauge, health indicator, and race statistics
- Minimap: Top-down view for strategic racing
- Crowd Animation: Spectators around the track to enhance the racing atmosphere
- W: Accelerate
- S: Brake/Reverse
- A: Turn Left
- D: Turn Right
- C: Toggle Between First-Person and Third-Person Camera Views
- Space: Start Game (from start screen)
- Modern web browser with WebGL support
- Docker (optional, for containerized deployment)
-
Clone this repository:
git clone <repository-url> cd CGV_project-Car_racing_Game -
Using Docker (recommended):
cd Computer-Graphics/A2 docker-compose up -
Without Docker:
- Navigate to the
Computer-Graphics/A2/gamedirectory - Install dependencies:
npm install - Start a local server and open the game in your browser
- Navigate to the
- Start: Press the start button or space bar to begin the race
- Countdown: The race begins after a 6-second countdown
- Racing: Navigate the track, collecting fuel cans and avoiding collisions with other cars
- Checkpoints: Complete 3 laps by crossing all checkpoints to finish the race
- Game Over: The game ends when you run out of fuel, your car is destroyed, or you complete the race
The game is built with a modular architecture:
- game.js: Main entry point that initializes the game and handles user interactions
- graphics.js: Manages 3D rendering, scene setup, models, lighting, and camera views
- mechanics.js: Controls game physics, collision detection, car movement, and game state
- ui.js: Handles all user interface elements and game state visualization
- Dynamic lighting with realistic shadows
- Reflective car materials
- Particle effects for collisions
- Environmental elements (clouds, trees, mountains)
- Skybox for realistic sky rendering
- Minimap for strategic navigation
This project was developed for educational purposes. All 3D models used are credited to their respective creators.
- Three.js community for the powerful 3D rendering library
- Model creators for the 3D assets used in the game
This game was developed as part of a Computer Graphics Visualization project.