PascalEditor（ 3D建筑编辑器 开源）

PascalEditor是一个基于Turborepo monorepo架构的现代化3D建筑编辑器

「25 PascalEditor（ 3D建筑编辑器 开源）」

链接：https://pan.quark.cn/s/cfd78f6bd0d5

https://github.com/pascalorg/editor

Repository Architecture

This is a Turborepo monorepo with three main packages:

editor-v2/
├── apps/
│   └── editor/          # Next.js application
├── packages/
│   ├── core/            # Schema definitions, state management, systems
│   └── viewer/          # 3D rendering components

Pascal Editor

https://img.shields.io/badge/license-MIT-blue.svg

https://img.shields.io/npm/v/@pascal-app/core

https://img.shields.io/discord/your-discord-id?logo=discord

https://img.shields.io/twitter/follow/your-handle?style=social

Pascal Editor ​ 是一个基于 React Three Fiber ​ 和 WebGPU​ 构建的现代化3D建筑编辑器。它具有模块化的monorepo架构、实时几何体生成和强大的基于节点的场景系统。

pascal_editor.mp4

✨ 特性

• WebGPU 驱动: 利用下一代图形API以获得最佳性能

• 模块化架构: 核心逻辑、3D渲染和编辑器UI之间的清晰分离

• 实时几何体系统: 自动墙角斜接、门/窗的CSG操作、楼板生成

• 基于节点的场景图: 灵活的层级结构，包含场地、建筑、楼层、墙、楼板、区域和物品

• 撤销/重做: 通过Zundo中间件实现50步历史记录

• 持久化存储: 场景数据自动保存到IndexedDB

• 空间查询: 基于网格的碰撞检测和放置验证

• 多楼层视图: 堆叠、展开或单独显示模式

🏗️ 技术栈

• React 19 ​ + Next.js 16​ (App Router)

• 使用WebGPU渲染器的 Three.js

• React Three Fiber ​ + Drei​ 用于声明式3D

• Zustand​ 用于状态管理

• Zod​ 用于模式验证

• Zundo​ 用于撤销/重做功能

• three-bvh-csg​ 用于CSG操作

• Turborepo​ 用于monorepo管理

• Bun​ 作为包管理器和运行时

📦 仓库架构

这是一个包含三个主要包的Turborepo monorepo：

pascal-editor/
├── apps/
│   └── editor/                 # Next.js应用程序（UI层）
└── packages/
    ├── core/                   # 模式定义、状态管理、系统
    └── viewer/                 # 3D渲染组件

包职责

包	职责
@pascal-app/core	节点模式、场景状态（Zustand）、几何体系统、空间查询、事件总线
@pascal-app/viewer	通过React Three Fiber进行3D渲染、默认相机/控制、后期处理
apps/editor	UI组件、工具、自定义行为、编辑器特定系统

🧠 核心概念

节点

节点是3D场景的基本构建块。所有节点都扩展自BaseNode：

BaseNode {
  id: string              // 自动生成（例如"wall_abc123"）
  type: string            // 类型标识符
  parentId: string | null // 父节点引用
  visible: boolean
  camera?: Camera         // 可选保存的相机位置
  metadata?: JSON         // 任意元数据
}

节点层次结构：

场地
└── 建筑
    └── 楼层
        ├── 墙 → 物品（门、窗）
        ├── 楼板
        ├── 天花板 → 物品（灯）
        ├── 屋顶
        ├── 区域
        ├── 扫描（3D参考）
        └── 参考线（2D参考）

状态管理

三个独立的Zustand存储管理不同关注点：

存储	包	职责
useScene	@pascal-app/core	场景数据：节点、根ID、脏节点、CRUD操作
useViewer	@pascal-app/viewer	查看器状态：选择、楼层显示模式、相机模式
useEditor	apps/editor	编辑器状态：活动工具、图层可见性、面板状态

渲染管线

1. 节点渲染器: 为每种节点类型创建Three.js对象的React组件

2. 场景注册表: 将节点ID映射到Three.js对象以进行快速查找

3. 系统 : 在useFrame中运行以更新脏节点几何体的React组件

4. 脏节点系统: 每帧只重新计算已更改节点的几何体

事件系统

用于组件间通信的类型化事件总线：

// 订阅事件
emitter.on('wall:click', (event: NodeEvent) => { ... })
emitter.on('grid:click', (event: GridEvent) => { ... })

// NodeEvent包含：
{
  node: AnyNode,
  position: [x, y, z],
  localPosition: [x, y, z],
  normal?: [x, y, z],
  stopPropagation: () => void
}

🚀 快速开始

先决条件

• Bun(v1.0或更高版本)

• Node.js 18+ (如果不使用Bun)

安装

# 克隆仓库
git clone https://github.com/your-org/pascal-editor.git
cd pascal-editor

# 安装依赖
bun install

开发

**重要提示：**​ 始终从根目录运行以启用所有包的热重载：

# 启动开发服务器
bun dev

# 这将：
# 1. 构建 @pascal-app/core 和 @pascal-app/viewer
# 2. 监视这两个包的更改
# 3. 启动Next.js编辑器开发服务器

在浏览器中打开 http://localhost:3000。

构建生产版本

# 构建所有包
turbo build

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

发布包

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

# 发布到npm
npm publish --workspace=@pascal-app/core --access public
npm publish --workspace=@pascal-app/viewer --access public

📁 关键文件

路径	描述
packages/core/src/schema/	节点类型定义（Zod模式）
packages/core/src/store/use-scene.ts	场景状态存储
packages/core/src/hooks/scene-registry/	3D对象注册表
packages/core/src/systems/	几何体生成系统
packages/viewer/src/components/renderers/	节点渲染器
packages/viewer/src/components/viewer/	主查看器组件
apps/editor/components/tools/	编辑器工具
apps/editor/store/	编辑器特定状态

🤝 贡献

我们欢迎贡献！请参阅我们的贡献指南了解详情。

1. Fork 仓库

2. 创建功能分支 (git checkout -b feature/amazing-feature)

3. 提交更改 (git commit -m '添加了一些很棒的功能')

4. 推送到分支 (git push origin feature/amazing-feature)

5. 打开一个Pull Request