map3d

map3d

Generate real-world city 3D maps in the browser

Description

Building a 3D model of a city for a project — a digital-twin base layer, a drone-survey reference, a block for a game or visualisation — usually means buying a commercial map SDK or tracing buildings one by one over satellite imagery in modelling software. A few streets can eat a whole day.

map3d turns that into dragging a box in the browser. Built on OpenStreetMap data with React Three Fiber, it generates real-world buildings and roads as a 3D scene: draw a box on the map to pick an area, and the next step renders grey extruded buildings and a green road network you can orbit freely.

The useful part is that it exports to a GLB file in one click, ready for Blender, Three.js or Unity. The author points to digital twins, drone surveying and GPS markers as things you can build on this base. Note the data comes from OpenStreetMap, so some building heights may be missing or inaccurate.

All features are free, MIT licensed, with a live demo you can open right away.

Features



Real-city 3D generation: Generates real buildings and roads within a chosen area as an extruded 3D scene from OpenStreetMap data.

Select in the browser: Draw a box on the map and hit next to render — no modelling software, it runs in the browser.

Buildings and roads: Grey blocks for buildings and green lines for roads make the city structure clear, with free orbit and zoom.

One-click GLB export: Export the scene as a standard GLB file for Blender, Three.js or Unity.

Digital-twin base layer: Suitable as a 3D base for digital twins, drone surveying and GPS markers to build further on.

R3F implementation: Built with React Three Fiber (Three.js for React), so front-end developers can read the code and integrate it directly.