ブラウザ上で3D建築設計！WebGPUで動くオープンソースの建物エディタ — editor

アーキテクチャ

Pascal EditorはTurborepoによるモノレポ構成で、3つの主要パッケージに分離されています：

• @pascal-app/core: ノードスキーマ定義、Zustandによるシーン状態管理、ジオメトリ生成システム、空間クエリ、イベントバス
• @pascal-app/viewer: React Three Fiberによる3Dレンダリング、カメラ制御、ポストプロセッシング
• apps/editor: Next.jsアプリケーション、UIコンポーネント、編集ツール、選択管理

ノードシステム

建築要素はフラットな辞書（Record<id, Node>）で管理され、親子関係はparentIdで表現されます。ノード階層は以下の通り：

Site → Building → Level → Wall/Slab/Ceiling/Roof/Zone/Scan/Guide
                    └── Wall → Item（ドア、窓）

各ノードはZodによるスキーマバリデーションが適用されています。

状態管理（3つのZustandストア）

ダーティノードによる差分更新

ノード変更時にdirtyNodesセットにIDが追加され、各システムがuseFrameループ内で差分のみを再計算する効率的な仕組みです。

システム（ジオメトリ生成）

• WallSystem: マイタリング（角の接合処理）とCSG（ブーリアン演算）によるドア・窓の切り抜き
• SlabSystem / CeilingSystem / RoofSystem: ポリゴンからの床・天井・屋根ジオメトリ生成
• ItemSystem: 壁・天井・床へのアイテム配置と高さ計算
• LevelSystem: stacked/exploded/soloモードでのフロア表示制御

空間管理

SpatialGridManagerがアイテム配置時の衝突検出・位置検証・スラブ標高計算を担当します。

イベントバス

mittベースの型付きイベントエミッターで、コンポーネント間通信を行います。wall:click、item:enter、grid:clickなどのイベントをサポート。

技術スタック

• React 19 + Next.js 16
• Three.js（WebGPUレンダラー）
• React Three Fiber + Drei
• Zustand + Zundo（状態管理 + undo/redo）
• Zod（スキーマバリデーション）
• three-bvh-csg（ブーリアンジオメトリ演算）
• Turborepo + Bun（モノレポ管理・パッケージマネージャー）

npmパッケージ

@pascal-app/coreと@pascal-app/viewerはnpmで公開されており、自分のプロジェクトに3Dビューア機能を組み込むことが可能です。

ライセンス

MITライセンス（商用利用可能）

開発環境のセットアップ

Bun（JavaScriptのパッケージマネージャー）が必要です。

# 依存パッケージをインストール
bun install

# 開発サーバーを起動（全パッケージのビルド＋ホットリロード付き）
bun dev

# ブラウザで http://localhost:3000 を開く

本番ビルド

# 全パッケージをビルド
turbo build

# 特定パッケージのみビルド
turbo build --filter=@pascal-app/core

注意: 必ずリポジトリのルートディレクトリから bun dev を実行してください。