- About
- Features
- Live Demo
- Screenshots
- Prerequisites
- Running Locally
- Controls
- How It Works
- Tech Stack
- Contributing
- License
Cube World is a procedurally generated 3D driving experience on the surface of a cube. A tiny car navigates an interconnected road network that spans all six faces, while periodic slice rotations instantly rearrange tiles between faces, reshaping the world around it.
Built with Three.js and TypeScript. Runs entirely in the browser — no server required.
- Multi-Face Road Network — Procedurally generated roads that wrap seamlessly across all 6 cube faces
- Slice Rotations — Periodic rotations instantly move rows/columns of tiles between faces, rearranging the world while the car drives
- Day/Night Cycle — Dynamic lighting with sunrise, sunset, street lights, and glowing windows
- Multiple Camera Modes — Follow cam, top-down, cinematic, and hood cam with air freshener
- Destination System — Visit POI markers scattered across the cube for points
- Ambient Audio — Engine sounds, wind, and environmental audio
- Crash & Reset — Landing on a non-road tile after a rotation triggers a particle burst, a brief tumble animation, and a full world regeneration
- Rich Scenery — Buildings, houses, schools, parks, farms, ponds with ducks, cemeteries with ghosts, construction sites, golf courses, and more
- Smart Building Orientation — Buildings and schools face adjacent roads automatically
- Particle Effects — Chimney smoke, fountain spray, and atmospheric particles
- Traffic Lights & Stop Signs — Functional intersection decorations
- People & Pedestrians — Tiny people populate the world
- Mobile Friendly — Touch controls, responsive UI, collapsible control panel
- PWA Ready — Installable as a progressive web app
| Day Mode | Scenery | Night Mode |
|---|---|---|
 |
 |
 |
- Node.js 18+ (for local development)
# Clone the repository
git clone https://github.com/paulrobello/cube-world.git
cd cube-world
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build| Input | Action |
|---|---|
| Drag | Rotate camera (when paused) |
| Scroll | Zoom |
| Double-click | Regenerate world |
| Space | Pause / Resume |
| D | Toggle debug labels |
| Input | Action |
|---|---|
| Drag | Rotate camera (when paused) |
| Pinch | Zoom |
| Double-tap | Regenerate world |
| Button | Function |
|---|---|
| 🔄 Cycle / ☀️ Day / 🌙 Night | Day/night mode |
| 📷 Follow / 🔽 Top-Down / 🎬 Cinematic / 🚗 Hood | Camera mode |
| ⏸️ Pause / |
Pause simulation |
| 🔀 Regenerate World | New random world |
| 🔊 Sound / ❌ Sound | Toggle audio |
| 🌲 Freshener / ❌ Freshener | Toggle hood cam air freshener |
| 📍 POI Markers / ❌ POI Markers | Toggle destination markers |
All preferences are saved to localStorage.
- Road Generation — A path-finding algorithm creates a connected road network that snakes across multiple cube faces, using adjacency rules for seamless face-to-face transitions
- Tile Classification — Road tiles are classified as straight, turn, T-junction, or crossroads based on entry/exit directions
- Scenery Placement — Non-road tiles are filled with randomized scenery (buildings, parks, farms, etc.) that automatically orient to face adjacent roads
- Car Navigation — The car follows the road path, wrapping between cube faces with smooth orientation transitions
- Slice Rotations — Periodic rotations instantly move rows/columns of tiles between faces, adjusting tile orientations, building facing directions, and the car's position and heading as needed
- Crash Detection — After each rotation, the car checks if it's still on a road tile; if not, a particle burst fires, the cube spins briefly as a visual reset cue, and the world regenerates from scratch
| Component | Technology |
|---|---|
| 3D Engine | Three.js r183 |
| Language | TypeScript 5.9 |
| Bundler | Vite 7 |
| Deployment | GitHub Pages (CI/CD) |
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - see LICENSE for details.
Created by Paul Robello