A city that grows from data
Where it started
I was browsing GitHub and found map3d by cartesiancs — an open-source tool that turns real map data into a 3D city. You pick an area on a map, and every building in that area rises up in 3D at its real-world height. You can orbit around the whole thing with your mouse, even export it as a 3D model file.
I should say upfront: I can't read the code behind any of this. But I stared at the demo for a while and thought: this belongs on my site.
在 GitHub 看到一座城市
我在逛 GitHub 時發現了 map3d——一個把真實地圖資料變成 3D 城市的開源工具。選一塊區域，那個區域裡的每一棟建築就按照真實高度立體長出來，可以用滑鼠自由旋轉瀏覽。
先說清楚：這背後的程式碼我一行也看不懂。但我盯著 demo 看了很久，覺得好酷，然後想：我也想把它放到我的網頁上。
What I changed
Not a copy — a remake for my site
The original tool and my website are built on different foundations — like a plug that doesn't fit the socket, it can't just be dropped in. So I handed the repo to AI and asked it to rebuild the whole thing as a native part of my site. The AI wrote all the code; my job was the brief: it has to live inside my website, and it has to look like it was born there.
The 3D city itself works the same way as the original. Almost everything around it — the look, the search, the little details — is new. That's where I came in.
不是照搬，是請 AI 重新蓋一次
原版工具和我的網站蓋在不同的地基上——像插頭跟插座規格不合，沒辦法直接插上去。所以我把整個 repo 丟給 AI，請它重新改寫成我網站的一部分。程式碼全部是 AI 寫的；我出的是需求：要能住進我的網站、要看起來像原生的作品。
3D 城市本身的原理跟原版一樣。但外面包的每一層——視覺、搜尋、小細節——都是新的。那才是我出手的地方。
The Morandi treatment
The original map3d uses a dark background with bright green roads and grey buildings. Fine for a utility, but it didn't match my site.
I rebuilt the palette:
- Buildings: dusty lavender
#9585A6— the same mist purple from my design system - Hover state: slightly brighter
#A186B4 - Roads: antique gold
#C9A96E— thin lines weaving between blocks - Ground: warm cream
#E8E6DF - Fog: same cream, fading buildings at the edges into nothing
The fog was the key decision. Without it, the ground plane has a visible edge — a hard line where the world ends. With fog, distant buildings dissolve into mist, and the scene feels infinite.
莫蘭迪配色
原版 map3d 用深色背景加亮綠色道路。當工具用沒問題，但跟我的網站風格不搭。
我重新設計了整套配色——建築用莫蘭迪紫、道路用古金色、地面用暖灰奶油色。再請 AI 加上一層霧化效果，讓邊緣的建築和道路漸漸淡出成跟背景同色的奶油白，遠的看不清、近的很清晰。
霧是最關鍵的決定。沒有它，地面有一條硬邊，城市看起來像擺在桌上的模型。有了它，畫面邊緣自然消融，感覺城市一直延伸到視線以外。
The camera problem
This was the hardest part — and it's invisible when it works.
The symptom: I'd load a city, and the camera would stare at empty ground instead of the buildings. I described exactly that to the AI — "the camera should frame the whole city when it loads, not the origin point." It turned out the camera and the mouse-orbit control were fighting each other over who gets to decide where to look, and the AI went through five different approaches before finding one where they stopped stepping on each other.
I couldn't judge any of those five attempts by reading them. I judged them the only way I could: load a city, see where the camera lands. Four times it landed wrong. The fifth time it framed the city perfectly — close enough to see the streets, far enough to see the whole block.
相機是最難的部分
症狀是這樣的：載入一個城市，相機卻盯著一片空地，不看建築群。我把症狀原封不動描述給 AI——「載入後相機應該框住整座城市，不是原點」。原來是相機和滑鼠旋轉控制在互搶指揮權，AI 前後試了五種做法才讓它們不打架。
那五個版本的程式碼我一個也看不懂。我的驗收方法只有一種：載入城市、看相機停在哪。前四次都不對，第五次完美框住整個街區——近得看得到街道，遠得看得到全貌。
Search anywhere
The original map3d only lets you draw a rectangle on a map. I asked for two more things:
Preset cities — four buttons (Taipei Xinyi, Tokyo Shibuya, Paris Arc de Triomphe, NYC Manhattan) that instantly set the area and fly the map there.
Location search — type any place name, hit Enter, pick from the dropdown. It runs on Nominatim, the free search service behind OpenStreetMap — no account, no cost. The search area is automatically kept to a reasonable size so you don't accidentally load half of Europe.
You can even type a full Taiwan address like "台北市信義區信義路五段7號" (that's Taipei 101). The service doesn't know individual house numbers in Taiwan, so the search automatically falls back to street level. You won't land on the exact door, but you'll get the right neighborhood.
搜尋任何地點
原版 map3d 只能在地圖上框選。我提了兩個需求：
預設城市 — 台北信義、東京澀谷、巴黎凱旋門、紐約曼哈頓，一鍵切換。
地點搜尋 — 輸入地名（中英文都行），選擇結果，自動飛過去設定區域。背後用的是 OpenStreetMap 的免費地名搜尋服務，不需要帳號也不用錢。搜尋範圍會自動限制在合理大小，不會不小心載入半個歐洲。
也可以直接輸入台灣地址，例如「台北市信義區信義路五段7號」（就是台北 101 的地址）。這個服務沒有收錄台灣的門牌號碼，所以搜尋會自動退到路名重新查詢。不會精確到門口，但會到對的街區。
The bounding box bug
Here's a fun one — and it's the part of the project I'm proudest of, because I caught it.
One day I noticed Taipei Xinyi was loading 36,000 buildings. That district has about 300. The 3D scene still rendered without a single error — just buildings scattered across an impossibly wide area, with the camera looking at empty space in the middle.
It turned out the AI had written two coordinates in the wrong order in the preset city list, and the map service dutifully returned data for the opposite slice of the globe. No error message anywhere. The only clue was a number that felt wrong to a human who knows roughly how big a city district is.
I can't read code, but I can read "36,000 buildings in Xinyi" and know something is off by a hundred times.
經緯度的小 bug
有一個有趣的 bug——而且是整個專案裡我最得意的部分，因為是我抓到的。
某天我注意到台北信義區載入了 36,000 棟建築。那個區大概只有 300 棟。3D 場景照樣渲染、沒有任何錯誤訊息——只是建築散佈在一個超大的範圍裡，相機看著中間的空地。
後來發現是 AI 在預設城市清單裡把兩個座標的順序寫反了，地圖服務就老老實實回傳了地球另一半的資料。整個過程沒有半個錯誤訊息。唯一的線索，是一個「對知道城市大概多大的人類來說很不對勁」的數字。
我看不懂程式碼，但我看得懂「信義區 36,000 棟」差了一百倍。
Building tooltips
Hover over any building and a little info card appears — building name (if the map data has one), type, height, floor count, and street address.
The card follows the Morandi design system: translucent cream background with a soft blur, gold border, serif heading. It's a small detail, but it makes the difference between "a tech demo" and "something that belongs on this site."
建築資訊提示
滑鼠移到建築上會跳出資訊卡——顯示建築名稱、類型、高度、樓層數、地址。
資訊卡跟網站設計系統一致：半透明奶油色背景、柔和的模糊感、金色邊框、襯線體標題。一個小細節，但這是「技術 demo」跟「屬於這個網站的作品」之間的差別。
Try it
Search any city, generate the 3D view, orbit around it, hover buildings for info, export as a 3D model. The whole thing runs in your browser — no server, no account, no cost.
來玩
搜尋任何城市、生成 3D、自由旋轉、hover 看建築資訊、匯出 3D 模型檔。全部在瀏覽器裡跑，不需要伺服器、帳號、或花任何錢。
Based on map3d by cartesiancs (MIT License). Map data © OpenStreetMap contributors.
