项目概览

仓库：pascalorg/editor
今日 Stars：约 6,184（今日新增 799）
许可证：MIT
在线体验：editor.pascal.app

Pascal Editor 是一款运行在浏览器中的开源 3D 建筑编辑器，基于 React Three Fiber 与 WebGPU 渲染器构建，允许用户直接在网页上创建、编辑并分享三维建筑场景。凭借现代化的技术栈和完善的项目架构，该项目今日登顶 GitHub Trending。

项目架构

项目采用 Turborepo 管理的 Monorepo（单体仓库）结构，分为三个核心包：

• apps/editor：主应用，基于 Next.js 构建的编辑器界面
• packages/core：模式定义、状态管理与几何生成系统
• packages/viewer：3D 渲染组件库

这种拆分方式使得核心逻辑与渲染层解耦，便于独立发布和复用。

核心概念

节点系统

所有 3D 对象以"节点"形式描述，所有节点继承自 BaseNode，形成如下层次结构：

1

Site → Building → Level → Wall / Item / Slab / Ceiling / Roof / Zone / Scan / Guide

这种树形节点设计让建筑场景的组织变得结构化和可预测。

状态管理

使用 Zustand 管理全局场景状态，并具备以下能力：

• 持久化到 IndexedDB（浏览器本地存储）
• 通过 Zundo 支持撤销 / 重做操作

渲染与系统

• 渲染器（Renderer）：React 组件，为每种节点类型生成对应的 Three.js 对象
• 系统（System）：运行于渲染循环中，负责动态更新几何图形和变换矩阵
• 布尔运算：借助 three-bvh-csg 支持复杂的 CSG（构造实体几何）运算

技术栈

WebGPU 是下一代 Web 图形 API，相比 WebGL 在性能和功能上均有大幅提升，Pascal Editor 率先采用该标准，代表了 Web 3D 技术的前沿方向。

快速开始

安装依赖

1

bun install

启动开发服务器

1

bun dev

此命令会：

1. 构建 @pascal-app/core 和 @pascal-app/viewer 包
2. 监听两个包的文件变更（热重载）
3. 启动 Next.js 编辑器开发服务器
4. 在 http://localhost:3000 打开应用

注意：务必从项目根目录运行 bun dev，以确保包监视器正常工作，保证对 packages/core/src/ 和 packages/viewer/src/ 中文件的修改能触发热重载。

生产构建

1
2
3
4
5

# 构建所有包
turbo build

# 构建指定包
turbo build --filter=@pascal-app/core

关键文件路径

1
2
3
4
5

packages/core/src/schema/          # 节点类型定义
packages/core/src/store/           # 场景状态存储（use-scene.ts）
packages/core/src/systems/         # 几何生成系统
packages/viewer/src/components/    # 节点渲染器
apps/editor/components/tools/      # 编辑器工具组件

为何值得关注

1. WebGPU 先行者：在 Web 3D 领域率先使用 WebGPU 渲染器，性能潜力远超 WebGL
2. 建筑领域垂直应用：专为建筑设计场景定制的节点模型，而非通用 3D 编辑器
3. 现代前端实践：Monorepo + Bun + React 19 + Zustand，代表 2025/2026 年的前端最佳实践组合
4. MIT 开源：可自由商用和二次开发，适合作为 3D Web 应用的参考架构

总结

Pascal Editor 将专业建筑设计工具带入了浏览器，借助 WebGPU 的强大渲染能力和 React 生态的开发效率，构建出一套完整的 3D 建筑创作平台。对于对 Web 3D 技术、建筑可视化或现代前端架构感兴趣的开发者，这个项目都极具参考价值。

项目地址：https://github.com/pascalorg/editor
在线体验：https://editor.pascal.app