Inspiration
HAVEN combines the delight of a miniature city with the drama of a disaster sandbox. The goal is to make urban planning tangible: point at a parcel, pinch to build, then respond as the world changes around your city.
What it does
Build and manage a 28×28 waterfront metropolis with homes, businesses, factories, roads, parks, clinics, water towers, power facilities and fire stations. Population, demand, jobs, happiness, taxes and service costs respond to your decisions. Animated traffic, balconies, rooftop details, a marina, wooded hills and a permanent volcano bring the model to life.
Six disasters—tornadoes, volcanic eruptions, wildfires, storm surges, meteor impacts and earthquakes—have randomized paths, targets and strength. Calm, Unstable and Chaos modes control their frequency. Emergencies damage parcels and disrupt income, utility capacity and road access. Deploy crews, evacuate, inspect damage and rebuild.
In immersive WebXR, the city becomes a tabletop model. Hand target rays and pinch/select events drive construction, inspection, bulldozing, taxes, time controls, saving, rotation, scale, disasters, emergency response and exit. Optional controllers and desktop mouse controls provide additional ways to play.
How it was built
HAVEN uses Meta Immersive Web SDK, Three.js and Vite. Geometry and effects are generated in code. The simulation, disaster director, renderer and spatial interface are separate modules. Progress is stored locally in the player's browser. Implementation was AI-assisted.
Challenges and lessons
Keeping controls legible without obscuring the city required separate interface approaches: the HTML interface rendered at the edges and a larger spatial panel for hands-only interaction. Input routing and city-centered camera movement needed careful testing. Separating simulation logic from rendering made disaster behavior and recovery testable.
Testing
Eighteen automated tests cover construction, economy, save validation, all disaster types, deterministic random replay, infrastructure damage, response, repairs and effect geometry. WebXR sessions were tested in IWER with simulated Quest 3 hands and controllers.
The video shows optional Quest controller input and a city-centered orbit. It is emulator footage. Physical Quest performance and comfort have not been verified.
What's next
Physical Quest 3/3S testing, performance tuning, comfort and hand-targeting refinement, deeper district simulation, progression goals and additional disaster scenarios. HAVEN is currently a single-player browser prototype.
Built With
- javascript
- meta-immersive-web-sdk
- three.js
- vite
- webxr
