Pascal Editor — 基于React Three Fiber的3D建筑设计工具 • blog.dopana

大多数建筑设计工具要么是昂贵的专有软件（Revit、ArchiCAD），要么是功能有限的 Web 工具。Pascal Editor 两者都不是——它是一个基于现代 Web 技术构建的开源 3D 建筑设计工具，具体来说是基于 React Three Fiber 和 WebGPU，专为在浏览器中创建和分享建筑项目而设计。

Pascal Editor 是什么？#

Pascal Editor 是由 PascalOrg 开发的 3D 建筑编辑器。它是一个 Turborepo 单体仓库，拥有跨越五个包的精密架构：

@pascal-app/core — 节点模式、场景状态（Zustand）、注册表契约、空间查询和事件总线
@pascal-app/viewer — 通过 React Three Fiber 进行 3D 渲染、共享渲染系统、相机/控制以及后处理
@pascal-app/editor — 编辑工具、面板、选择和直接操作 UI
@pascal-app/nodes — 带有节点定义、渲染器、几何体和系统的内置注册表插件
@pascal-app/ui — 共享 UI 组件

该编辑器作为 Next.js 16 应用程序运行，使用 React 19，WebGPU 进行渲染，Bun 作为包管理器。

核心架构#

基于节点的场景图#

Pascal Editor 中的一切都是节点。所有节点都扩展自基础类型：

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

typescript

节点形成层级结构：

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

text

巧妙之处在于：节点存储在扁平字典 (Record<id, Node>) 中，而不是嵌套树中。父子关系通过 parentId 和 children 数组维护，使查找快速且状态管理简单。

使用 Zustand 进行状态管理#

每个包都有自己的 Zustand 存储：

存储	包	职责
`useScene`	`@pascal-app/core`	场景数据：节点、CRUD、撤销/重做（通过 Zundo 实现 50 步历史）、持久化到 IndexedDB
`useViewer`	`@pascal-app/viewer`	查看器状态：选择、层级显示模式
`useEditor`	`apps/editor`	编辑器状态：活动工具、面板状态、偏好设置

脏节点系统#

当节点发生变化时，它被标记为脏节点。系统每帧检查脏节点集，仅重新计算受影响节点的几何体。这就是 Pascal Editor 在浏览器中实现实时性能的方式。

系统架构#

系统是在渲染循环 (useFrame) 中运行的 React 组件，负责更新几何体和变换：

系统	职责
WallSystem	生成带有斜接和 CSG 切割的墙体几何体（用于门窗）
SlabSystem	从多边形生成楼板几何体
CeilingSystem	生成天花板几何体
RoofSystem	生成屋顶几何体
ItemSystem	将物品放置在墙壁、天花板或地板上
LevelSystem	处理层级可见性和垂直定位

场景注册表#

注册表将节点 ID 映射到 Three.js 对象，实现快速查找——无需遍历场景图。

编辑工具#

编辑器提供了带有专业工具的工具栏：

SelectTool — 选择与操作，支持层级导航
WallTool — 绘制带有斜接和切割的墙体
ZoneTool — 创建功能区域
ItemTool — 放置家具、固定装置、门窗
SlabTool — 创建楼板

插件系统#

Pascal Editor 可通过插件扩展。插件通过与内置组件相同的清单提供节点类型（模式、3D/2D 渲染、放置工具、检查器参数）和左侧面板。

技术栈#

层	技术
框架	React 19 + Next.js 16
3D 渲染	Three.js (WebGPU) + React Three Fiber + Drei
状态管理	Zustand + Zundo + IndexedDB
验证	Zod
几何体	three-bvh-csg
单体仓库	Turborepo
包管理器	Bun

开始使用#

git clone https://github.com/pascalorg/editor
cd editor
bun install
bun dev
# 打开 http://localhost:3002

bash

为什么 Pascal Editor 很重要#

大多数开源 3D 编辑器要么是游戏引擎（Godot），要么是通用 CAD 工具。Pascal Editor 是专为建筑设计而构建的——内置了墙体斜接、楼板生成、楼层管理和门窗切割功能。

其 WebGPU 渲染器可以在浏览器中以实时性能处理复杂的建筑模型。而其插件架构使其能够从建筑编辑器发展成为一个完整的建筑设计平台。

对于开发者来说，它也是一个 React Three Fiber 架构的实战教程——展示了如何在实际 3D 应用中构建存储、系统、渲染器和插件的结构。

Pascal Editor — 基于React Three Fiber的3D建筑设计工具