Search any location worldwide and generate a 3D city model from real OpenStreetMap building and road data.
How It Works
- Search any location by name, or pick from preset cities (Taipei, Tokyo, Paris, NYC)
- Draw a custom area on the Leaflet map to select exactly what to render
- Click Generate 3D to fetch building footprints and road networks from the Overpass API
- Orbit, zoom, and pan the 3D scene with mouse controls
- Hover buildings to see name, type, height, levels, and address
- Export GLB for use in Blender, Unity, or any 3D tool
Technology
Built on map3d by cartesiancs (MIT License). Uses React Three Fiber for rendering, Three.js ExtrudeGeometry for building extrusion, and Nominatim geocoding for location search. Building heights are derived from OSM height or building:levels tags.
Design
Morandi palette: buildings in dusty lavender (#9585A6), roads in antique gold (#C9A96E), warm cream ground with atmospheric fog fade. Tooltip overlays use the Classical Morandi design system with serif headings and translucent backdrop.
