3D Car Racing Game

A thrilling 3D car racing game built with Three.js, featuring realistic physics, multiple tracks, and smooth controls.

Features

  • šŸŽļø 3D car models with realistic physics
  • šŸ Multiple racing tracks
  • šŸŽ® Smooth keyboard controls (WASD/Arrow keys)
  • šŸ“Š Real-time speedometer and lap timing
  • šŸŽÆ Checkpoints and lap counting
  • 🌟 Particle effects and visual enhancements
  • šŸ“± Responsive design that works on desktop and mobile

Controls

  • W/↑: Accelerate
  • S/↓: Brake/Reverse
  • A/←: Turn Left
  • D/→: Turn Right
  • Space: Handbrake
  • R: Reset car position

Project Structure

ā”œā”€ā”€ backend/
│   └── index.ts             # Hono server for static files
ā”œā”€ā”€ frontend/
│   ā”œā”€ā”€ components/
│   │   ā”œā”€ā”€ Game.tsx         # Main game component
│   │   ā”œā”€ā”€ UI/
│   │   │   ā”œā”€ā”€ HUD.tsx      # Heads-up display
│   │   │   ā”œā”€ā”€ Menu.tsx     # Main menu
│   │   │   └── Controls.tsx # Control instructions
│   │   └── Game/
│   │       ā”œā”€ā”€ Car.ts       # Car physics and rendering
│   │       ā”œā”€ā”€ Track.ts     # Track generation and management
│   │       ā”œā”€ā”€ Camera.ts    # Camera controls
│   │       └── Physics.ts   # Physics engine integration
│   ā”œā”€ā”€ assets/
│   │   ā”œā”€ā”€ models/          # 3D models (if any)
│   │   └── textures/        # Texture files
│   ā”œā”€ā”€ index.html           # Main HTML template
│   └── index.tsx            # Frontend entry point
└── shared/
    └── types.ts             # Shared TypeScript types

Tech Stack

  • 3D Engine: Three.js
  • Physics: Cannon.js (for realistic car physics)
  • Frontend: React 18.2.0 with TypeScript
  • Styling: TailwindCSS
  • Backend: Hono (for serving static assets)
  • Controls: Keyboard input handling

Game Mechanics

  • Realistic car physics with acceleration, braking, and steering
  • Track boundaries and collision detection
  • Lap timing and checkpoint system
  • Speed-based camera effects
  • Particle systems for exhaust and dust effects