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

アーキテクチャ

Turborepoによるモノレポ構成で、3つのパッケージに分離されている:

• @pascal-app/core: ノードスキーマ定義、シーン状態管理（Zustand）、ジオメトリ生成システム、空間クエリ、イベントバス
• @pascal-app/viewer: React Three Fiberによる3Dレンダリング、カメラ・コントロール、ポストプロセッシング
• apps/editor: UIコンポーネント、ツール群、選択管理、エディタ固有の動作

ノードシステム

建物データは「ノード」という単位で管理され、フラットな辞書（Record<id, Node>）として保存される。ノード階層は以下の通り:

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

各ノードはZodスキーマでバリデーションされる。

状態管理

3つのZustandストアで状態を分離管理:

Systems（ジオメトリ生成）

React Three FiberのuseFrameループで動作し、「ダーティノード」（変更があったノード）のみを差分更新する仕組み:

• WallSystem: マイター処理やCSG（ブーリアン演算）によるドア・窓の切り抜き
• SlabSystem: ポリゴンから床ジオメトリを生成
• CeilingSystem / RoofSystem: 天井・屋根のジオメトリ生成
• ItemSystem: 壁・天井・床へのアイテム配置と高さ計算
• LevelSystem: 階の表示モード制御（積層/分解/単独）

SceneRegistry

ノードIDとThree.jsオブジェクトのマッピングを高速に行うための仕組み。useRegistryフックでレンダラーが3Dオブジェクトを登録し、シーングラフを走査せずに直接アクセスできる。

イベントバス

mittベースの型付きイベントエミッターで、wall:click、item:enter、zone:context-menu、grid:clickなどのイベントをコンポーネント間で通信。

空間グリッドマネージャ

衝突検出と配置バリデーションを担当。床・壁へのアイテム配置可否判定やスラブ標高の取得が可能。

エディタツール

• SelectTool: 選択と操作
• WallTool: 壁の描画
• ZoneTool: ゾーン作成
• ItemTool: 家具・設備の配置
• SlabTool: 床スラブ作成

技術スタック

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

ライセンス

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

# 依存パッケージをインストール（Bunパッケージマネージャを使用）
bun install

# 開発サーバーを起動（ルートディレクトリから実行）
bun dev

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

本番用ビルド:

turbo build

npmパッケージとして利用する場合:

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