map3d 開源 3D 城市地圖生成工具技術解析

技術背景

問題場景：傳統 3D 城市模型製作流程繁瑣，需要手動建模或購買付費資料源（如 ArcGIS Urban），且專有格式難以跨工具流通；既有免費方案（Google Earth 3D、Cesium OSM Buildings）存在需登入、無直接 GLB 導出、格式複雜等門檻。

目標：建構一個零門檻的 Web 工具，讓使用者在地圖上框選區域後，於數秒內生成可直接匯入主流 3D 軟體的城市模型，將原本耗時數週的工作壓縮到秒級。

專案規模：GitHub 976 stars / 140 forks，MIT 協議，上線不到一年。

核心技術方法

1. 技術架構

  • 前端 3D 渲染：採用 React Three Fiber (R3F)，基於 Three.js 的 React 封裝層，提供宣告式 3D 場景描述。
  • 構建工具：Vite（快速 HMR、開發體驗佳）。
  • 資料來源：OpenStreetMap (OSM) 眾包地理資料。

2. 3D 體塊生成流程

  1. 使用者於 Web 介面框選地圖區域（bbox）。
  2. 從 OSM 拉取該區域的建築輪廓（footprint polygon）與道路網資料。
  3. 讀取 OSM 標籤中的 height 或 building:levels 欄位作為高度依據。
  4. 將 2D 輪廓沿垂直方向擠出（extrusion）成 3D 體塊。
  5. 結合道路網生成完整城市場景。
  6. 透過 R3F / Three.js 的 GLTFExporter 導出為 GLB（glTF Binary） 格式。

3. 輸出格式選擇

選擇 GLB（glTF 2.0 Binary） 作為唯一輸出格式，理由是它是當前 3D 領域最通用的交換格式，可直接被 Unity、Blender、AR 框架、無人機平台、3D 列印切片軟體讀取，無需額外轉換。

關鍵實現細節

OSM 資料欄位

欄位 用途 備註
height 建築高度（米） 優先使用
building:levels 樓層數 備援，需推算（通常每層 ~3m）

資料精度局限（README 警告）

  • OSM 為眾包資料，建築高度標註完整度依賴在地社群。
  • 歐洲城市資料品質普遍較佳，發展中地區大量缺失。
  • 適用場景：概念驗證、快速原型、遊戲場景、體量分析。
  • 不適用場景：需精確尺寸的工程項目。

本地部署步驟

git clone https://github.com/cartesiancs/map3d.git
cd map3d
npm install
npm run dev

啟動後訪問 localhost，MIT 協議可自由修改。

Roadmap 已完成 vs 待開發

功能 狀態
3D 建築生成 ✅
道路生成 ✅
GLB 導出 ✅
建築紋理 ❌
高度自定義（手動覆寫 OSM 錯誤資料） ❌
材質系統 ❌

可複用的技術摘要

  1. R3F + Three.js GLTFExporter 組合：是 Web 端生成可下載 3D 資產的標準方案，適用於任何需要「瀏覽器內生成模型並導出」的場景。

  2. OSM Overpass API 作為免費地理資料源：透過 bbox 查詢可取得建築 footprint、道路、POI 等資料，無需 API Key、無付費牆，適合輕量級地理應用。

  3. 2D 輪廓擠出 (Extrusion) 是城市快速建模的最簡可行方案：以 OSM polygon + height 欄位透過 Three.js 的 ExtrudeGeometry 即可實作，無需複雜的 Procedural Generation。

  4. GLB 作為跨平台交換格式的首選：相較於 OBJ、FBX、3D Tiles，GLB 是單一二進位檔、自帶材質、被 Unity / Blender / WebXR / 3D 列印生態全面支援，是「導出格式」的最佳預設選擇。

  5. 眾包資料的可信度策略：對精度敏感的應用，應預留「手動覆寫」機制（如 map3d 規劃中的 height override 功能），允許使用者修正資料源錯誤。

  6. 「零門檻 + 直接導出」的產品定位：對比同類工具（需登入、專有格式、付費），免登入與標準格式直出是顯著差異點，適用於工具型開源專案的定位策略。

  7. MIT 協議 + Vite + React 技術棧：對個人開發者快速產出可複製、可二次開發的 Web 工具，是當下生產力最高的組合之一。

無標籤

關注作者：

新增評論