4x4 Builder is a browser-based 3D off-road vehicle customization and simulation app. Build your dream 4x4, customize every detail from suspension lift to tire size, then drive it through procedurally generated terrain with realistic physics. Features multiplayer support, VR compatibility, and real-time engine audio synthesis.
🌐 Try it live at 4x4builder.com
- Vehicles — Toyota 4Runner (3rd–5th gen), Land Cruiser (J80, J250), Tacoma, Jeep Wrangler (YJ, JK), Cherokee XJ, Ford Bronco
- Suspension — Adjustable lift height from stock to 6"
- Wheels — Various rim options from brands like XD Wheels, American Racing, Konig, Cragar, and OEM
- Tires — Multiple tire models including BFGoodrich KM2/KM3/AT, Nitto Mud Grappler, Maxxis Trepador
- Customizable sizing — Rim diameter (15"–22"), tire diameter (28"–40"), rim width, wheel offset
- Paint & Finish — Any body color with adjustable metallic/matte finish
- Accessories — Bumpers, rock sliders, roof racks (vehicle-specific)
- Realistic physics — Powered by Rapier physics engine with suspension, torque curves, and transmission simulation
- Procedural terrain — Infinite, dynamically generated terrain with varied elevation and flat regions
- Dynamic grass — GPU-instanced grass with wind animation that responds to terrain
- Engine audio — Real-time synthesized engine sounds using Web Audio API AudioWorklet
- Tire tracks — Persistent tire marks in the terrain
- Dust particles — Wheel dust effects when driving
- Orbit camera — Third-person view with smooth follow and terrain collision avoidance
- First-person — Driver's seat perspective
- Auto-rotate — Showcase mode for screenshots
- Real-time multiplayer — See other players' vehicles and drive together
- Room-based — Create or join rooms to play with friends
- In-game chat — Communicate with other players
- Vehicle sync — Your customizations are visible to others
- WebXR compatible — Works with VR headsets via
@react-three/xr - Teleport locomotion — Navigate with VR controllers
- Immersive experience — Sit inside your custom vehicle in VR
- Screenshot export — Download high-quality PNG images
- URL sharing — Vehicle configuration URLs for easy sharing
- Local storage — Save multiple vehicle builds
- Mobile support — Touch controls with virtual joysticks
- Responsive UI — Works on desktop, tablet, and mobile
| Category | Technologies |
|---|---|
| Frontend | React 19, Zustand, Tailwind CSS 4 |
| 3D Engine | Three.js, React Three Fiber, Drei |
| Physics | Rapier via @react-three/rapier |
| VR/XR | @react-three/xr |
| Audio | Web Audio API with custom AudioWorklet |
| Build Tool | Vite |
| Multiplayer Server | Node.js with ws WebSocket library |
| Shaders | Custom GLSL for terrain, grass, and sky |
- Node.js 20.0.0 or higher
- npm or yarn
# Clone the repository
git clone https://github.com/theshanergy/4x4builder.git
cd 4x4builder
# Install dependencies
npm install
# Start the development server
npm run devOpen https://localhost:5173 in your browser.
Note: The dev server uses HTTPS with a self-signed certificate for WebXR compatibility. You may need to accept the security warning in your browser.
npm run build
npm run previewThe multiplayer server is a separate Node.js application located in the server/ directory.
# Navigate to server directory
cd server
# Install server dependencies
npm install
# Start the server (development with auto-reload)
npm run dev
# Or start for production
npm startThe server runs on port 8080 by default and provides:
- WebSocket connections for real-time multiplayer
- Health check endpoint:
http://localhost:8080/health - Stats endpoint:
http://localhost:8080/stats
| Variable | Description | Default |
|---|---|---|
VITE_MULTIPLAYER_SERVER_URL |
WebSocket server URL for multiplayer | ws://localhost:8080 |
4x4builder/
├── components/
│ ├── scene/ # 3D scene components (Vehicle, Terrain, Camera, etc.)
│ └── ui/ # React UI components (Editor, Sidebar, Chat, etc.)
├── hooks/ # Custom React hooks (physics, audio, materials)
├── network/ # Multiplayer networking (WebSocket client)
├── public/assets/ # Static assets (3D models, textures, audio)
│ └── models/
│ ├── vehicles/ # Vehicle GLB models by make/model
│ └── wheels/ # Rim and tire GLB models
├── server/ # Multiplayer WebSocket server
├── shaders/ # GLSL vertex and fragment shaders
├── store/ # Zustand state stores
├── utils/ # Utility functions
└── vehicleConfigs.js # Vehicle, wheel, and tire definitions
| Key | Action |
|---|---|
↑ / W |
Accelerate |
↓ / S |
Brake / Reverse |
← / → or A / D |
Steer |
Shift |
Drift mode |
R |
Reset vehicle position |
C |
Cycle camera mode |
T |
Open chat (multiplayer) |
Esc |
Close chat / menus |
- Left joystick — Steering
- Right joystick — Throttle/brake
- Drift button — Enable drift mode
- Reset button — Reset vehicle position
Full controller support with analog steering and triggers.
Contributions are welcome! Here are some ways you can help:
- 🐛 Report bugs — Open an issue with details and reproduction steps
- 💡 Request features — Suggest new vehicles, parts, or functionality
- 🔧 Submit PRs — Fix bugs or implement new features
- 🎨 Create 3D models — Contribute new vehicles, wheels, or accessories
- 📝 Improve docs — Help make the documentation clearer
- Fork the repository
- Create a feature branch:
git checkout -b feature/my-feature - Make your changes and test thoroughly
- Submit a pull request with a clear description
- React — UI framework
- Three.js — 3D graphics library
- React Three Fiber — React renderer for Three.js
- Drei — Useful helpers for R3F
- Rapier — Physics engine
- Zustand — State management
- Vite — Build tool
- Tailwind CSS — Styling
