首页Reactpascalorg/editor
// archived 2026-04-16
pascalorg

editor

Frontend#React#Three.js#WebGPU#Turborepo#Zustand
前往 GitHub →
130

// 项目简介

Pascal 是一个使用 React Three Fiber 和 WebGPU 构建的 3D 建筑编辑器,并以 Turborepo monorepo 形式组织。它利用集中的 Zustand store 进行状态管理,并通过注册表系统将数据节点映射到 3D 对象。该架构具有专门的系统,可在渲染循环中处理脏节点,从而动态更新几何体和场景变换。

// 技术分析

Pascal Editor 是一款 3D 建筑设计应用程序,采用 Turborepo monorepo 架构,利用 React Three Fiber 和 WebGPU 实现高性能渲染。它通过使用基于系统的响应式架构来解决建筑建模的复杂性,其中场景状态通过注册表和 dirty-node 跟踪系统与 3D 对象表示解耦。这种设计选择确保了高效的更新,仅对修改后的节点重新计算几何体,同时使用 Zustand stores 为复杂的建筑层级提供了稳健且支持撤销的状态管理层。

// 核心亮点

01
使用 dirty-node 跟踪系统来优化性能,仅对已更改的节点重新计算几何体。
02
实现了一个将节点 ID 映射到 Three.js 对象的场景注册表,无需遍历场景图即可直接访问 3D 元素。
03
使用带有 Zundo 中间件的 Zustand 构建了稳健的状态管理系统,以实现原生的撤销/重做功能。
04
采用模块化的基于系统的架构,其中 WallSystem 或 SlabSystem 等专用逻辑负责处理复杂的几何生成。
05
提供空间网格管理器来处理碰撞检测并验证家具或墙壁等建筑元素的放置。
06
支持具有扁平字典结构的层级场景组织,该结构定义了父子关系以实现灵活的数据管理。

// 典型使用场景

01
交互式 3D 建筑设计与建模
02
墙体、楼板和屋顶的实时几何生成
03
具有撤销/重做功能的层级场景管理

// 快速开始

首先,克隆存储库并从根目录运行 'bun install' 以设置 monorepo 依赖项。从根目录执行 'bun dev' 以启动开发服务器,它会自动构建并监视 core 和 viewer 包以进行热重载。然后,您可以通过在浏览器中访问 http://localhost:3000 来进入编辑器界面。