ThreeJS Physics Game

A dynamic, physics-based 3D environment built with React, Three.js, and Rapier. Drive a vehicle through a detailed playground featuring roads, water bodies, and interactive obstacles.

🚀 Features

• Physics-Driven Vehicle: Realistic driving physics including acceleration, steering, and jumping.
• Dynamic Camera: A hybrid camera system that smoothly follows the vehicle's movement.
• Interactive Environment:
  • Road System: Textured highway with glowing markings.
  • Natural Elements: Winding rivers with transparency and metallic reflections.
  • Obstacles: Physics-enabled cubes for a "parkour" feel.
  • Respawn System: Automatic reset if you fall off the map.
• Modern Tech Stack: Fast development and performance with Vite and React Three Fiber.

🎮 Controls

• W / Up Arrow: Accelerate
• S / Down Arrow: Brake / Reverse
• A / Left Arrow: Steer Left
• D / Right Arrow: Steer Right
• Space: Jump
• Mouse: Orbit and Zoom (OrbitControls)

🛠️ Tech Stack

• Framework: React
• 3D Engine: Three.js
• Component Wrapper: React Three Fiber
• Physics: React Three Rapier
• Helpers: React Three Drei
• Build Tool: Vite

🏁 Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone <your-repo-url>
   cd ThreeJSGame

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173.

📂 Project Structure

• src/Vehicle.jsx: Contains the vehicle physics, controls, and camera logic.
• src/Playground.jsx: Defines the environment, including the landscape, roads, and obstacles.
• src/main.jsx: Application entry point.
• vite.config.js: Vite configuration.