Pascal Editor — React Three Fiberで作る3D建築エディタ

ほとんどの建築設計ツールは、高価なプロプライエタリソフトウェア（Revit、ArchiCAD）か、機能の限られたWebツールのいずれかです。Pascal Editorはそのどちらでもありません — React Three FiberとWebGPUで構築されたオープンソースの3D建築エディタで、ブラウザ上で建築プロジェクトを作成・共有するために設計されています。

Pascal Editorとは#

Pascal EditorはPascalOrgが開発した3D建築エディタです。Turborepoモノレポで、5つのパッケージにまたがる洗練されたアーキテクチャを採用しています：

• @pascal-app/core — ノードスキーマ、シーン状態（Zustand）、レジストリコントラクト、空間クエリ、イベントバス
• @pascal-app/viewer — React Three Fiberによる3Dレンダリング、共有レンダリングシステム、カメラ/コントロール、ポストプロセッシング
• @pascal-app/editor — 編集ツール、パネル、選択、直接操作UI
• @pascal-app/nodes — ノード定義、レンダラー、ジオメトリ、システムを含むビルトインレジストリプラグイン
• @pascal-app/ui — 共有UIコンポーネント

エディタはReact 19を搭載したNext.js 16アプリケーションとして動作し、WebGPUでレンダリング、Bunをパッケージマネージャーとして使用します。

コアアーキテクチャ#

ノードベースのシーングラフ#

Pascal Editorのすべてはノードです。すべてのノードは基本型を拡張します：

BaseNode {
  id: string
  type: string
  parentId: string | null
  visible: boolean
  camera?: Camera
  metadata?: JSON
}

ノードは階層を形成します：

Site
└── Building
    └── Level
        ├── Wall → Item (doors, windows)
        ├── Slab
        ├── Ceiling → Item (lights)
        ├── Roof
        ├── Zone
        ├── Scan (3D reference)
        └── Guide (2D reference)

スマートな部分：ノードはネストされたツリーではなく、フラットな辞書（Record<id, Node>）に保存されます。親子関係はparentIdとchildren配列で維持され、高速なルックアップとシンプルな状態管理を実現します。

Zustandによる状態管理#

各パッケージは独自のZustandストアを持ちます：

Dirty Nodeシステム#

ノードが変更されると、dirtyとしてマークされます。システムは毎フレームdirtyセットをチェックし、影響を受けるノードのジオメトリのみを再計算します。これがPascal Editorがブラウザでリアルタイムパフォーマンスを達成する方法です。

システムアーキテクチャ#

システムは、レンダーループ（useFrame）で実行されるReactコンポーネントで、ジオメトリとトランスフォームを更新します。

シーンレジストリ#

レジストリはノードIDをThree.jsオブジェクトにマッピングし、シーングラフのトラバースなしで高速ルックアップを実現します。

編集ツール#

エディタは特殊なツールを備えたツールバーを提供します：

• SelectTool — 階層ナビゲーションによる選択と操作
• WallTool — マイター接合とカットアウト付きの壁を描画
• ZoneTool — 機能ゾーンを作成
• ItemTool — 家具、備品、ドア、窓を配置
• SlabTool — 床スラブを作成

プラグインシステム#

Pascal Editorはプラグインで拡張可能です。プラグインはビルトインと同じマニフェストを通じて、ノード種類（スキーマ、3D/2Dレンダリング、配置ツール、インスペクタパラメトリック）と左サイドバーパネルを提供します。

技術スタック#

始め方#

git clone https://github.com/pascalorg/editor
cd editor
bun install
bun dev
# http://localhost:3002 を開く

Pascal Editorが重要な理由#

ほとんどのオープンソース3Dエディタはゲームエンジン（Godot）か汎用CADツールです。Pascal Editorは建築設計に特化して構築されています — 壁のマイター接合、スラブ生成、階管理、ドア/窓のカットアウトが組み込まれています。

WebGPUレンダラーにより、複雑な建築モデルをブラウザでリアルタイムパフォーマンスで処理できます。そしてプラグインアーキテクチャにより、建築エディタから完全な建築設計プラットフォームへと成長できます。

開発者にとっては、React Three Fiberアーキテクチャの実践的な教科書でもあり、実際の3Dアプリケーションでストア、システム、レンダラー、プラグインを構造化する方法を示しています。

参考資料#

• Pascal Editor GitHub Repository ↗
• PascalOrg on GitHub ↗
• React Three Fiber Documentation ↗