BuildingNav

• 

  Landing Page

• 

  3D Building Visualization with Escape Routes

Inspiration

We built BuildingNav to solve a common problem: during emergencies people and first responders struggle without clear indoor maps or up‑to‑date evacuation routes. Public floorplans are often scattered or unavailable, so we wanted a lightweight tool that turns a selected location into an explorable floorplan/3D view and clear exit guidance with minimal dependencies.

What it does

Searches or picks a building location, obtains (or generates) a floorplan, renders an interactive visualization (3D floorplan + walls), highlights exits, computes a simple evacuation route, and shows real‑time indoor position as a “you are here” pin.

How we built it

Frontend: Next.js + React with Three.js using @react-three/fiber and @react-three/drei for rendering. Geodata: OpenStreetMap (Overpass) and Nominatim for lookup (no keys), optional Google Custom Search if available. Room/extrusion logic and evacuation routing are implemented client‑side; we provide robust fallbacks (sample JSON/image and procedural demo buildings) so the app works without external APIs.

Challenges we ran into

OSM data is inconsistent (missing levels/geometry), and Overpass can be rate‑limited—so reliable lookup required fallbacks. Mapping 2D floorplan images into real‑world scale and converting polygons into clean 3D walls required iterative tuning. Real indoor positioning accuracy is inherently noisy, so UX for the pin and accuracy visualization needed care.

Accomplishments that we're proud of

A working end‑to‑end flow: search → lookup → visual model → tracking and evacuation route. We implemented a readable UI, procedural demo building generator, textured floorplan rendering, extruded room walls, and a clear red pin/accuracy visualization that communicates location even when positioning is imprecise.

What we learned

Open data can get you far, but you must plan for variability and build graceful fallbacks. Three.js + React makes interactive spatial UI fast to prototype, and small UX details (pin, accuracy circle, floor controls) make the experience usable even with imperfect data. Prioritizing simple, robust defaults beats fragile “perfect” integrations during a short build window.

What's next for BuildingNav

Improve floorplan extraction and scaling (ML-assisted edge/room detection), add multi-floor level alignment and elevator/stair semantics, offline caching and authenticated building uploads, tighter mobile performance and accessibility, and production deployment (Vercel) with optional integrations for building management systems and Mapbox/Google where users want higher‑fidelity data.

Built With

• googlecustomsearch
• javascript
• next.js
• openstreetmap
• postcss
• react
• tailwindcss
• three.js
• typescript