When working on digital twins, unified city dashboards, campus inspections, or drone survey result displays, you often need to show city white models (untextured 3D buildings). Traditional GIS data processing workflows usually involve assembling models in desktop software and then importing them into an engine, which comes with significant debugging and collaboration overhead. If you could quickly select an area in the browser, turn buildings and roads into a rotatable 3D scene, and even directly export common 3D formats for other systems, it would greatly simplify many GIS and web visualization scenarios.

In recent years, web-based 3D technology stacks have become increasingly mature, and more projects are bridging open map data with front-end rendering. I recently came across a very popular project, cartesiancs/map3d, which can generate urban 3D white models from OSM data with one click and export them in GLB format. Let me introduce it today.

P.S. This project is still under development and has already gained 1.5K stars, showing strong interest. Keep an eye on future feature iterations.

Introduction to map3d

map3d is a front-end project that generates real-world-style 3D city maps in the browser. Its core technology stack is React + React Three Fiber (R3F), with Three.js handling rendering at the bottom. On the data side, it relies on OpenStreetMap, extracting elements such as roads and buildings to construct 3D geometry. The project’s features are free to use and support exporting results as GLB files, making it easy to further process them in digital twins, 3D engines, or other toolchains.

Official website and source code repository: https://github.com/cartesiancs/map3d

Online demo: https://map.fleet.im

Core Features

map3d is positioned more as a project demonstration or showcase demo, pursuing simplicity and speed rather than replacing full BIM or detailed city modeling workflows. It already implements several core capabilities: displaying 3D buildings, rendering roads in 3D, and exporting the entire scene as a GLB file. These three features already form a complete loop for users who simply want to “lift” 2D vectors into 3D for display. The technology stack also incorporates Leaflet, react-leaflet, and Vite, together with zustand for state management and axios for data fetching – a typical modern front-end GIS demo engineering setup.

The official roadmap also mentions building textures, finer-grained customization of heights and materials, terrain height maps, and more. The current version focuses more on geometry and export, with room to expand rendering capabilities. It is important to note that building height attributes in OSM data vary greatly in completeness across different regions. The author has clearly marked in the repository that the accuracy of elevation data cannot be guaranteed – some buildings may lack height information or be mislabeled. A future plan includes the ability for users to manually correct building heights.

Usage Examples

Online Usage (Recommended)

Visit https://map.fleet.im/ directly and follow the prompts step by step. The example at the beginning of this article was generated by me using the online demo (you can guess which city it is).

Running Locally

Running the project locally is similar to a typical Vite project. First install Node.js, then clone the repository in the terminal and enter the directory, install dependencies, and start the development server to access it in the browser.

You can use the following commands: git clone https://github.com/cartesiancs/map3d.git, then enter the map3d directory and run npm install. After the dependencies are installed, run npm run dev to start the local development server; the terminal will print the local address you can visit. To generate a production build, run npm run build.

I have not tested compatibility on every machine. If the first npm install is slow or throws version conflicts, try switching to an LTS version of Node, or double-check the lock file and new dependencies before installing.

Summary

In summary, map3d brings together OSM data, R3F-based 3D display, and GLB export. You can view a rough 3D city in the browser and export the model for further editing in other tools, significantly reducing the reliance on large 3D engines or professional 3D software. If you need to write a proposal, prepare a presentation preview, and don’t want to immediately dive into heavy engines like Unity or Unreal, or if you simply want to quickly run a WebGIS white model for demonstration, give this project a try.

If you have used similar tools or have more robust engineering practices, feel free to leave a comment and discuss.