
pascalorg/editor 是一个开源的、基于 Web 的 3D 建筑设计编辑器。它允许用户直接在浏览器中创建、编辑和共享 3D 建筑模型,是一个技术先进且设计现代的 CAD/BIM 类开源项目。
以下是该项目的核心介绍:
1. 项目定位与核心功能
在线 3D 建模:专注于建筑空间设计,用户可以绘制墙体(Walls)、楼板(Slabs)、门窗、家具等。
现代渲染技术:利用 WebGPU 和 React Three Fiber(基于 Three.js)实现高性能的 3D 渲染,支持高质量的光影和后处理效果。
即时协作与共享:用户可以生成链接并分享自己的建筑设计作品。
智能交互:支持吸附(Snapping)、层级管理(Level System)、撤销/重做(Undo/Redo)以及材质替换等功能。
2. 技术栈架构
该项目在架构设计上非常考究,适合开发者学习 Web 3D 开发:
前端框架:Next.js + React。
3D 引擎:React Three Fiber (R3F) 和 Three.js。
渲染标准:优先支持 WebGPU(同时也支持 WebGL 回退)。
状态管理:使用 Zustand 管理复杂的 3D 场景状态。
包管理:采用 Turborepo 管理 Monorepo 结构,将核心逻辑(Core)、渲染组件(Viewer)和 UI 库完全解耦。
3. 项目结构 (Monorepo)
apps/editor:完整的 Next.js 应用,集成了所有编辑工具。
packages/core:包含场景架构(Schema)、状态管理逻辑和几何生成算法,不含 UI。
packages/viewer:纯粹的 3D 渲染器,接收数据并展示模型。
packages/ui:共享的 UI 组件库。
4. 为什么值得关注?
极高性能:通过 WebGPU 技术,它能比传统的 WebGL 渲染器处理更复杂的场景,且运行更加流畅。
代码质量高:项目采用了严格的模块化设计。例如,渲染逻辑与业务逻辑彻底分离,viewer 包可以独立于编辑器使用。
活跃的社区:该项目在 GitHub 上拥有很高的星标数(超过 14k Stars),并有活跃的贡献者在不断添加如 IFC(建筑信息模型标准)支持、AI 辅助设计等新特性。
5. 如何快速开始?
如果你想在本地运行该项目,需要安装 Bun(或 Node.js):
git clone https://github.com/pascalorg/editor.git
cd editor
bun install
bun dev
运行后访问 http://localhost:3000 即可看到编辑器界面。
官方演示地址:[链接登录后可见]