Map3D Hands-On: One-Click 3D City Maps and GLB Export Guide

Introduction: This Has Gotten Way Too Simple

In the past, if you wanted to build a real-world 3D city model in 3D software like Blender or on the web with something like Three.js, the workflow was usually tedious and painful:

Go to a government open data platform or GIS website and download huge geographic datasets in Shapefile or GeoJSON format.
Import the data into professional GIS software such as QGIS to handle coordinate projection conversion and attribute filtering.
Install the Blender-GIS plugin in Blender, try to extrude building heights, and possibly lose your work halfway through because of an unstable network connection or a plugin crash.
Deal with materials, overlapping polygons, and finally export everything manually into the 3D format you need.

But the open-source tool we are looking at today, Map3D, makes all of this way too simple.

You do not need to install any software, write any code, or apply for a Mapbox API Token. Just open your browser, choose a city, click the button in the bottom-right corner, and you can directly download a packaged 3D GLB model.

Hands-On Demo (Live Demo)

Below is a screen recording of using Map3D in the browser to quickly and smoothly generate a 3D city map. You can see its rendering speed and modern, technical visual style:

Try it online: If you want to play with it yourself right away, you can visit the official Map3D website.

What Exactly Is Map3D?

It is built with React-Three-Fiber (R3F) and Three.js, and uses geographic data from OpenStreetMap (OSM) to generate 3D city scenes.

When you drag around the map or move to a specific area, the system fetches building and road information for that region, then generates an interactive 3D scene directly in the browser.

How to Use It: Really Just Three Steps

Choose an area: Open https://map.fleet.im/. You can drag with the mouse or use the search box to locate the city you want to download, such as Taipei Xinyi District, Shibuya in Tokyo, Manhattan in New York, and so on.
Adjust the view: Use the right mouse button, or hold Ctrl and drag with the left mouse button, to rotate the 3D view freely and inspect building heights and spatial distribution.
Export with one click: Click the “Export GLB” button in the bottom-right corner of the page. The system will package the current 3D scene into a .glb file in real time and automatically trigger the download.

What Can You Do With the Exported GLB Model? (Practical Use Cases)

Because GLB is now a common and lightweight standard format for 3D and web workflows, once the download is complete, you can use it directly in several mainstream tools and engines:

1. Blender: Quickly Iterate, Remix, and Render

Replace materials: After importing it into Blender, you can swap the default gray buildings for glass materials with Emission properties, or add a metallic look, quickly creating a cyberpunk or futuristic tech style.
Lighting and animation: With the Cycles or Eevee renderer, you can add sunlight, neon strips, and camera animation to produce a polished city time-lapse video in just a few minutes.

2. Unity: Quickly Build Game Levels and Prototypes

City greyboxing: In the early stages of game development, if you need the physical proportions of a real city, you can drag the GLB directly into Unity, create simple Mesh Colliders, and let your character or vehicle move through real streets.
Simulator development: This is especially useful for quickly prototyping drone flight simulations or autonomous driving street tests.

3. Unreal Engine: Combine With Nanite and Lumen for Cinematic Scenes

Large-scene integration: In UE 5, you can use the exported city GLB as a base terrain block, then combine it with built-in dynamic lighting through Lumen and depth-of-field effects to quickly compose a cinematic city street scene.
Pairing with Quixel Bridge assets: Add realistic materials and detailed objects on top of the city model, turning an otherwise plain 3D map into a more realistic visual scene within minutes.

4. Three.js / React-Three-Fiber: Load It Directly on the Web

Digital Twin applications: With useGLTF from @react-three/drei or Three.js GLTFLoader, you only need a few lines of code to render this model in your web project and use it as the 3D base for a smart city interface or IoT Dashboard:
javascript
```
import { useGLTF } from '@react-three/drei'

function CityModel() {
  const { scene } = useGLTF('/path/to/exported-city.glb')
  return <primitive object={scene} />
}
```

Quick Look at the Technical Implementation

Looking at the open-source code behind this tool, its operating logic is actually very straightforward and runs entirely on the frontend:

Read OpenStreetMap data: After the user selects an area on the page, the browser fetches OpenStreetMap geographic data for that region, including building outlines, roads, and related information.
Real-time rendering with React-Three-Fiber: React-Three-Fiber converts vector data such as buildings and roads on the map directly into 3D mesh objects on the page’s WebGL canvas.
Direct client-side export: When you click “Export GLB” in the bottom-right corner, the page traverses the models in the scene, packages the geometry data in the browser, and triggers the download. No backend server is needed for conversion, which keeps the process safe and fast.

Project Limits and Notes

Map3D is very convenient, but there are a few things to keep in mind when using it:

!IMPORTANT 📢 Geographic data accuracy is limited by OpenStreetMap Because the map data comes entirely from the open-source OpenStreetMap project, some regions may not have complete height information, so the generated building heights may not perfectly match reality. This means it cannot guarantee 100% height accuracy. It is better suited for concept demos, level prototypes, or background decoration, and is not recommended for high-precision GIS engineering surveys.

Online demo site: https://map.fleet.im/
GitHub open-source repository: cartesiancs/map3d

This article is a hands-on test of an open-source 3D geospatial tool. For more details, see its GitHub repository.