A third-person OpenStreetMap explorer using Three.js, Rapier.js physics, and real-world elevation data.
- Real-World Mapping: Load any location from OpenStreetMap with automatic 3D building generation
- Realistic Physics: Full physics simulation powered by Rapier.js
- Third-Person Exploration: Smooth camera controls for immersive exploration
- Visual Programming: Optional Blockly integration for interactive behaviors
- Procedural Generation: Built-in layout utilities for creating custom scenes
- Elevation Data: Real terrain elevation from online sources
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewVisit http://localhost:5173 and explore!
- Quick Start Guide - Complete project overview and architecture
- Components - ECS component reference
- Prefabs - Built-in prefab library
- Layout Utilities - Procedural scene generation
- OSM Explorer - OpenStreetMap integration guide
- Architecture - System design and patterns
- Rendering: Three.js
- Physics: Rapier.js (rapier3d-compat)
- Visual Programming: Blockly
- Build: Vite + TypeScript
src/
├── core/ # Three.js engine & game loop
├── ecs/ # Entity Component System
├── physics/ # Rapier.js physics wrapper
├── camera/ # Third-person camera
├── input/ # Unified input handling
├── prefabs/ # Prefab definitions
├── scene/ # Scene utilities & examples
└── examples/osm-world-explorer/ # OSM integration
Load pre-built scenes from the in-game menu:
- Prefab Showcase - All prefabs in one location
- Downtown District - City with buildings and streets
- Beach Boardwalk - Coastal scene
- City Park - Green park with trees
Or load any real-world location via OpenStreetMap!
| Action | Keyboard | Gamepad |
|---|---|---|
| Move | WASD/Arrows | Left Stick |
| Jump | Space | A Button |
| Interact | E | X Button |
| Camera | Mouse | Right Stick |
MIT License - see LICENSE file for details
Contributions welcome! Please read the documentation in docs/ before submitting PRs.
- Arnis - Inspiration for real-world map generation
- AWS Terrain Tiles - Elevation data (Terrarium format)
- OpenStreetMap contributors for map data
- Three.js community
- Rapier.js physics engine