pascalorg

editor

Frontend#React#Three.js#WebGPU#Turborepo#Zustand

130

// summary

Pascal is a 3D building editor built with React Three Fiber and WebGPU, organized as a Turborepo monorepo. It utilizes a centralized Zustand store for state management and a registry system to map data nodes to 3D objects. The architecture features specialized systems that process dirty nodes in the render loop to dynamically update geometry and scene transforms.

// technical analysis

Pascal Editor is a 3D building design application architected as a Turborepo monorepo, leveraging React Three Fiber and WebGPU for high-performance rendering. It addresses the complexity of building modeling by utilizing a reactive, system-based architecture where scene state is decoupled from 3D object representation via a registry and a dirty-node tracking system. This design choice ensures efficient updates by only recomputing geometry for modified nodes, while the use of Zustand stores provides a robust, undo-capable state management layer for complex architectural hierarchies.

// key highlights

Uses a dirty-node tracking system to optimize performance by only recomputing geometry for nodes that have changed.

Implements a scene registry that maps node IDs to Three.js objects, enabling direct access to 3D elements without traversing the scene graph.

Features a robust state management system using Zustand with Zundo middleware for native undo/redo functionality.

Employs a modular system-based architecture where specialized logic like WallSystem or SlabSystem handles complex geometry generation.

Provides a spatial grid manager to handle collision detection and validate placement for architectural elements like furniture or walls.

Supports hierarchical scene organization with a flat dictionary structure that defines parent-child relationships for flexible data management.

// use cases

Interactive 3D building design and modeling

Real-time geometry generation for walls, slabs, and roofs

Hierarchical scene management with undo/redo capabilities

// getting started

To begin, clone the repository and run 'bun install' from the root directory to set up the monorepo dependencies. Execute 'bun dev' from the root to start the development server, which automatically builds and watches the core and viewer packages for hot-reloading. You can then access the editor interface by navigating to http://localhost:3000 in your browser.