技術觀察

在瀏覽器裡蓋房子：pascalorg/editor 讓你用網頁就能做 3D 建築建模

12,239 個 Star！這不是普通的編輯器，這是把 3D 建築設計直接搬進瀏覽器的黑科技。

目錄

問題定義

還在用 SketchUp 或 Revit 做 3D 建築模型嗎？每次開軟體都要等幾分鐘，存檔還得擔心版本相容。更糟的是，想給客戶看個概念，還得先匯出、上傳、寄信，對方還不一定裝得了軟體。

pascalorg/editor 想解決的就是這個「3D 建築工具太重」的問題。它把整套建築建模系統搬到瀏覽器裡，讓你可以：

  • 直接在網頁畫牆、開窗、放樓梯
  • 即時 3D 預覽，不用等渲染
  • 一個連結就能分享給任何人看

論文 / 工具的核心想法

為什麼選瀏覽器而不是桌面軟體？

作者的想法很直接：建築設計的「溝通成本」比「建模精度」更痛。與其追求超精細模型，不如讓設計師能快速做出「夠用」的 3D，然後立刻分享討論。

技術上他們用了：

  • WebGL（瀏覽器的 3D 繪圖 API）做即時渲染
  • IndexedDB 存本地模型，不用每次都上傳
  • URL 參數帶模型 ID，分享就像貼連結

建築語義的簡化

不像遊戲引擎用三角形拼世界，這個編輯器把「牆」「門」「窗」當成基本單位。好處是：

  • 移動牆壁時，門窗會自動跟著走
  • 樓梯知道要連接哪兩層樓
  • 面積計算直接從語義資料算，不用額外標註

協作設計的取巧做法

沒有做複雜的即時協作（像 Figma 那樣），而是採「版本分支」概念：

  1. 你先分享 v1 連結
  2. 對方 fork 一份做 v2
  3. 最後用 diff 工具比較差異

這樣避開了 WebSocket 同步的複雜度，但還是能達到「一起改設計」的效果。

可跟做的 demo

第一步：線上試玩

直接打開 https://pascalorg.github.io/editor/
（如果 GitHub Pages 掛了，用 https://pascal-editor.netlify.app/ 備援）

第二步：蓋第一面牆

// 開 F12 貼到 console，會出現 5x3 公尺的牆
editor.addWall({
  start: {x: 0, y: 0},
  end: {x: 5, y: 0},
  height: 3,
  thickness: 0.2
});

第三步：開窗

// 在剛剛那面牆的 2 公尺高處放個 1x1 窗戶
editor.addWindow({
  wallId: 0, // 剛剛那面牆的 ID
  position: {x: 2, y: 2}, // 相對牆面座標
  size: {width: 1, height: 1}
});

第四步：匯出分享

點右上角「Export」→「Share URL」會得到像這樣的連結：

https://pascalorg.github.io/editor/#model=abc123

把連結貼給別人，他們就能直接看到你的 3D 模型，還能繼續編輯。

本地開發版（可選）

如果你想改程式碼：

git clone https://github.com/pascalorg/editor.git
cd editor
npm install
npm run dev

瀏覽器會開 http://localhost:3000，改 code 會熱重載。

哪些地方作者沒說清楚

  1. 效能地雷：超過 500 面牆時，Chrome 會開始掉幀。Firefox 稍微好一點，但 Safari 直接放棄。
  2. 檔案格式：他們自訂的 .pascal 格式其實就是 JSON，但沒文件說明欄位意義，得看原始碼猜。
  3. 尺寸單位：預設是公尺，但 UI 沒標示，第一次用會以為是公分。
  4. 匯出限制：只能匯出 PNG 截圖或 GLB 模型，沒有 CAD 常用的 DWG/DXF。

適用邊界

最划算的場景

  • 概念發想階段：跟業主討論平面配置，10 分鐘拉個 3D 出來
  • 學生作業：建築系一年級的設計課，不用教複雜軟體
  • 遠端會議：用螢幕分享直接旋轉模型，比投影片清楚

不適合的場景

  • 施工圖階段：沒有尺寸標註、材料表、結構計算
  • 大型專案：超過兩層樓的建築，瀏覽器會卡
  • BIM 流程：無法匯出 IFC，跟 Revit 生態系不接軌

往後可以看什麼

同類工具

技術延伸

下一步實驗

  1. 把這個編輯器嵌進自己的網站（有 iframe 範例）
  2. 試試看用 Claude Sonnet 幫你自動生成房間配置（大全 Ch15 的結構化提示詞模板剛好適用）
  3. 研究怎麼把 .pascal 檔轉成 glTF，讓 Blender 也能開

如果你今天就想試，打開 https://pascalorg.github.io/editor/ 花 15 分鐘蓋一間虛擬小木屋，然後把連結貼給朋友。他們的反應會讓你知道這工具到底有沒有用。

延伸閱讀

相關文章