pascalorg/editor

Create and share 3D architectural projects.

這是什麼

Pascal Editor 是一個用 React Three Fiber 與 WebGPU 打造的 3D 建築編輯器，目標是讓使用者建立、編輯並分享 3D architectural projects。它不是單一巨大前端，而是 Turborepo monorepo：@pascal-app/core 負責節點 schema、場景狀態、registry、空間查詢與事件匯流排；@pascal-app/viewer 負責 3D 渲染、相機與後處理；@pascal-app/editor 提供工具列、面板、選取與直接操作 UI；@pascal-app/nodes 則包裝內建節點、renderers、geometry 與 systems。README 最值得注意的是它把建築場景抽象成 Node 階層：Site、Building、Level 之下再放 Wall、Slab、Ceiling、Roof、Zone、Scan、Guide 與 Item，資料以扁平 dictionary 儲存，親子關係靠 parentId 與 children 維繫。

為什麼上榜

這個專案今天有 18,674 stars、單日新增 341 stars，熱度明顯來自「可用的 3D 建築編輯器」與「可拆成 npm runtime 套件」兩個訊號。README 不只展示 UI，而是把資料流、store、renderer、system 與 plugin 機制都攤開：節點更新後標記 dirty，React renderer 註冊 Three.js 物件，systems 在 useFrame 中只重算 dirty nodes 的 geometry。這種 資料狀態與 3D 物件分離 的架構，對想做瀏覽器 CAD、室內配置、建築原型工具的人很有參考價值，也讓除錯焦點能落在資料、registry 或 system 各自的邊界。它和一般 three.js demo 的差異在於，README 已把 undo/redo、IndexedDB persistence、selection hierarchy、spatial placement validation 與 plugin manifest 放進整體設計，而不是只停留在渲染範例。

適合誰，可以拿來做什麼

Pascal Editor 適合兩類人：一是想直接體驗或嵌入 3D building viewer/editor 的前端開發者；二是正在設計 Web-based 3D 編輯器架構 的團隊。README 顯示它已有 viewer runtime、內建節點 plugin、editor tools、空間 grid manager、牆面與樓板幾何系統等模組，因此可以拿來研究如何把建築物件、選取狀態、幾何更新與 UI 操作拆開。若你只想快速使用渲染能力，可以安裝 published packages 並載入 built-in plugin；若你要改 editor 本體，則要熟悉 React、Next.js、Three.js、Zustand、Bun 與 Turborepo。README 也明確提到 plugin extensibility：外部 plugin 可以提供 node kinds、2D/3D rendering、placement tools、inspector parametrics 與 left-rail panels，適合拿來擴充特定建築元素或程序化物件。

上手

README 提供兩種上手路徑。若要使用已發布套件，先安裝 core、viewer、editor 與 nodes，並在掛載 <Viewer> 前載入內建 plugin：

npm install @pascal-app/core @pascal-app/viewer @pascal-app/editor @pascal-app/nodes

import { loadPlugin } from '@pascal-app/core'
import { builtinPlugin } from '@pascal-app/nodes'

await loadPlugin(builtinPlugin)

若要跑本機開發環境，README 指定使用 Bun，並且必須從 repo root 啟動，才能讓 core/viewer package watchers 與 Next.js editor dev server 一起運作：

bun install
bun dev

開發伺服器啟動後，README 指向 http://localhost:3002。production build 則使用 turbo build，也可用 --filter 只建特定 package。

README 重點摘要

• 場景以 flat dictionary + parentId/children 管理，而不是巢狀 tree；這讓 lookup、更新與 system processing 更直接。
• useScene 使用 Zustand，並搭配 IndexedDB persistence 與 Zundo undo/redo；節點變更會進入 dirty set，systems 下一幀再更新 geometry。
• renderer 只負責建立 placeholder mesh/group 並用 useRegistry 註冊；WallSystem、SlabSystem、RoofSystem、ItemSystem 等 systems 才負責實際幾何與 transforms。
• editor 內建 Select、Wall、Zone、Item、Slab 等 tools，並用 Site → Building → Level → Zone → Items 的 selection hierarchy 處理不同層級互動。
• plugin API 是正式擴充入口：README 連到 developer guide，也提供 pascalorg/plugin-trees 作為獨立 plugin 範例。