Map3D 實測：一鍵生成 3D 城市地圖與 GLB 匯出指南

前言：事情變得太簡單了！

在過去，如果你想在 3D 軟體（如 Blender）或網頁（如 Three.js）中建立一個真實世界的城市 3D 模型，流程往往非常繁瑣且令人頭痛：

1. 前往政府開放資料平台或 GIS 網站下載龐大的 Shapefile 或 GeoJSON 格式地理數據。
2. 將數據匯入專業的 GIS 軟體（如 QGIS）進行座標投影轉換與屬性篩選。
3. 在 Blender 中安裝 Blender-GIS 插件，嘗試拉伸建築高度，期間還可能因為網絡不穩或插件崩潰而前功盡棄。
4. 處理各種材質、多邊形重疊問題，最後手動匯出成需要的 3D 格式。

但是，今天我們要介紹的這款開源黑科技 —— Map3D，直接讓這一切變得太簡單了！

你不需要安裝任何軟體、不需要寫任何代碼、也不需要申請任何 Mapbox API Token。你只需要打開瀏覽器，選定好城市，點擊右下角，就能直接下載打包好的 3D GLB 模型！

實作展示 (Live Demo)

以下是使用 Map3D 在瀏覽器中快速流暢生成 3D 城市地圖的實際操作錄影，你可以看到其渲染速度與極具現代科技感的視覺風格：

線上體驗：如果你想立即親自動手玩玩看，可以直接訪問 Map3D 官方網站。

Map3D 到底是什麼？

它基於 React-Three-Fiber (R3F) 和 Three.js 構建， 並利用 OpenStreetMap（OSM）的地理資料生成 3D 城市場景。

當你在地圖上拖曳、定位到特定區域時， 系統會取得該區域的建築與道路資訊， 並即時在瀏覽器中生成可互動的 3D 場景。

使用步驟：真的只要三步

1. 定位區域：打開 https://map.fleet.im/ 網頁，可以使用滑鼠拖曳或搜尋框定位到你想下載的城市（例如：台北信義區、東京澀谷、紐約曼哈頓等）。
2. 調整視角：利用滑鼠右鍵或按住 Ctrl + 滑鼠左鍵拖曳，可以任意旋轉 3D 視角，觀察建築物的高度與空間分佈。
3. 一鍵匯出：點擊網頁右下角的 「Export GLB」 按鈕，系統就會即時將目前的 3D 場景打包成 .glb 檔案並自動觸發下載。

匯出後的 GLB 模型能做什麼？（實際應用場景）

由於 GLB 是目前 3D 與網頁端非常通用且輕量的標準格式，下載完成後你可以直接在多個主流工具與引擎中無縫使用：

1. Blender：極速進行二次創作與渲染

• 更換材質：匯入 Blender 後，你可以把預設的灰色建築物一鍵替換成帶有發光（Emission）屬性的玻璃材質，或是添加金屬質感，立刻呈現出賽博朋克（Cyberpunk）或未來科技風格。
• 打光與動畫：利用 Cycles 或 Eevee 渲染器，加入太陽光、霓虹燈條，配合相機動畫，就能在幾分鐘內做出一支高質感的城市縮時攝影影片。

2. Unity：快速搭建遊戲關卡與原型

• 城市粗模（Greyboxing）：在遊戲開發初期，如果需要一個真實城市的物理比例，直接將 GLB 拖入 Unity，建立簡單的 Mesh Collider，就能讓你的遊戲角色或載具在真實街道上穿梭。
• 模擬器開發：特別適合用來快速製作無人機飛行模擬、自動駕駛街道測試的原型。

3. Unreal Engine：配合 Nanite 與 Lumen 打造影視級場景

• 大場景整合：在 UE 5 中，可以將導出的城市 GLB 作為基礎地塊，搭配內建的動態光照（Lumen）與景深效果，快速合成極具電影感的城市街景。
• 搭配 Quixel Bridge 資源：在城市模型上覆蓋真實材質與細節物件，讓原本平淡無奇的 3D 地圖在幾分鐘內達到寫實的視覺效果。

4. Three.js / React-Three-Fiber：直接在網頁端載入

• 數位雙生 (Digital Twin) 應用：使用 @react-three/drei 的 useGLTF 或 Three.js 的 GLTFLoader，只需幾行代碼就能在你的 Web 專案中渲染這個模型，作為智慧城市、物聯網監控（IoT Dashboard）的 3D 底座：
  javascript

  複製

  import { useGLTF } from '@react-three/drei'
  
  function CityModel() {
    const { scene } = useGLTF('/path/to/exported-city.glb')
    return <primitive object={scene} />
  }
  

技術實現簡析

回到這款工具的開源代碼，它的運作邏輯其實非常直觀且完全在前端運行：

1. 讀取 OpenStreetMap 數據：用戶在網頁上選定區域後，瀏覽器會根據所選區域取得 OpenStreetMap 的地理資料，包含建築輪廓、道路等資訊。
2. React-Three-Fiber 即時渲染：使用 React-Three-Fiber 將地圖上的建築、道路等向量數據，直接在網頁的 WebGL 畫布上轉化為 3D 網格物件。
3. 客戶端直接匯出：點擊右下角「Export GLB」時，網頁會直接遍歷場景中的模型，在瀏覽器端將幾何數據打包並觸發下載，不需要任何後端伺服器進行轉換，安全且快速。

專案限制與注意事項

雖然 Map3D 非常好用，但使用時有以下幾點需要注意：

!IMPORTANT 📢 地理數據的準確性受限於 OpenStreetMap 由於地圖數據完全來自開源的 OpenStreetMap，部分地區可能缺乏完整的高度資訊，因此最終生成的建築高度未必與現實完全一致。因此它無法保證 100% 的高度精準性，更適合用於概念展示、關卡原型或背景裝飾，而不建議直接用於高精度的 GIS 工程測量。

相關連結

• 線上體驗網站：https://map.fleet.im/
• GitHub 開源倉庫：cartesiancs/map3d

本文為開源 3D 地理資訊工具實測，更多詳情可參考其 GitHub 倉庫。