ホームReactpascalorg/editor
// archived 2026-04-16
pascalorg

editor

Frontend#React#Three.js#WebGPU#Turborepo#Zustand
GitHub で見る →
130

// 概要

Pascal は React Three Fiber と WebGPU で構築された 3D 建築エディタであり、Turborepo のモノレポ構成を採用しています。状態管理には一元化された Zustand ストアを使用し、データノードを 3D オブジェクトにマッピングするレジストリシステムを備えています。アーキテクチャは、レンダーループ内で変更されたノードを処理し、ジオメトリやシーンの変換を動的に更新する専門的なシステムを特徴としています。

// 技術解説

Pascal Editor は、 Turborepo monorepo として設計された 3D 建築設計アプリケーションであり、 React Three Fiber と WebGPU を活用して高性能なレンダリングを実現しています。このアプリケーションは、シーンの状態を registry と dirty-node tracking system を介して 3D オブジェクト表現から分離するリアクティブなシステムベースのアーキテクチャを採用することで、建築モデリングの複雑さに対処しています。この設計選択により、変更されたノードのジオメトリのみを再計算することで効率的な更新を保証し、 Zustand ストアの使用によって複雑な建築階層に対する堅牢で undo 可能な状態管理レイヤーを提供しています。

// 主要ハイライト

01
dirty-node tracking system を使用し、変更されたノードのジオメトリのみを再計算することでパフォーマンスを最適化しています。
02
ノード ID を Three.js オブジェクトにマッピングする scene registry を実装し、シーングラフを走査することなく 3D 要素への直接アクセスを可能にしています。
03
Zustand と Zundo ミドルウェアを使用した堅牢な状態管理システムを備え、ネイティブな undo/redo 機能を実現しています。
04
WallSystem や SlabSystem といった専門的なロジックが複雑なジオメトリ生成を処理する、モジュール式のシステムベースのアーキテクチャを採用しています。
05
家具や壁などの建築要素の衝突判定と配置検証を行うための spatial grid manager を提供しています。
06
親子関係を定義するフラットな辞書構造による階層的なシーン構成をサポートし、柔軟なデータ管理を実現しています。

// ユースケース

01
インタラクティブな 3D 建築設計およびモデリング
02
壁、スラブ、屋根のリアルタイムなジオメトリ生成
03
Undo/Redo 機能を持つ階層的なシーン管理

// クイックスタート

開始するには、リポジトリを clone し、ルートディレクトリで 'bun install' を実行して monorepo の依存関係をセットアップしてください。ルートで 'bun dev' を実行して開発サーバーを起動すると、 core パッケージと viewer パッケージが自動的にビルドおよび監視され、ホットリロードが有効になります。その後、ブラウザで http://localhost:3000 にアクセスすると、エディターインターフェースを利用できます。