一个开源的完整3D建筑编辑器,完全在浏览器里跑

事情是这样的。

最近逛 GitHub 的时候，我刷到了一个项目。点进去看了看，直接给我整不会了——

这是一个完全在浏览器里运行的 3D 建筑编辑器。

不用装 AutoCAD，不用买 Revit，不用每年交 5000 美元的授权费。

打开网页就能用。

它是什么？

这个项目叫Pascal Editor，一个用 React Three Fiber + WebGPU 搭起来的 3D 建筑编辑器。

简单说，你可以在浏览器里：

• • 创建建筑、楼层、墙体、区域
• • 选中一个区域，拖动墙，重塑板
• • 把楼层堆叠起来，或者像爆炸视图一样展开
• • 实时编辑，GPU 渲染，速度接近原生软件

这玩意儿完全开源，GitHub 地址我放文末了。

为什么觉得很牛逼？

说实话，建筑事务所在这类 BIM 软件上花的钱，我是真的觉得心疼。

类似功能的软件，每席位 5 万美元起步。一年授权费能买辆好车。

Pascal Editor 虽然还没到 Revit 那种完整度，但核心功能都有了：

完整的层次结构

Site → Building → Level → Wall → Item（门、窗）

标准的 BIM 层级，你在专业软件里怎么组织项目，这里就怎么组织。

ECS 风格架构

用 React Three Fiber + Zustand 搭的状态管理。

脏节点跟踪——只有被修改的部分才会重新渲染。这就是为什么能在浏览器里跑得飞快。

完整的撤销/重做

基于 Zundo 实现的 50 步历史记录。不用担心手滑改坏了。

WebGPU 渲染

GPU 驱动的几何体生成。墙体做 mitering 处理，门窗用 CSG 做布尔切割。这些都是在 GPU 上跑的。

实际体验怎么样？

项目里有个在线 Demo。我试了一圈：

• • 画墙、开窗、放家具——操作很流畅
• • 切换楼层的堆叠/爆炸/单独模式——一秒钟切换
• • 相机控制、选中物体、调整参数——响应都很及时

说实话，如果几年前你告诉我浏览器里能跑这个级别的 3D 编辑器，我会觉得你在吹牛。

但现在，这就是现实。

技术栈是什么？

如果你是开发者，可能会好奇它是怎么实现的。

项目是一个 Turborepo monorepo，三个核心包：

@pascal-app/core    # Schema定义、状态管理、系统更新@pascal-app/viewer  # 3D渲染组件apps/editor         # Next.js前端应用

架构设计很干净：

• • 数据层：Zustand + IndexedDB 持久化
• • 渲染层：React Three Fiber + Drei
• • 几何层：three-bvh-csg 做布尔运算
• • 状态层：Zundo 实现 undo/redo

每个节点类型都有对应的 Renderer 和 System。Renderer 负责创建占位 mesh，System 负责每帧检查脏节点并更新几何体。

这套架构，算是 React 生态里做 3D 编辑器的最佳实践了。

怎么跑起来？

如果你想本地跑一下：

# 安装依赖bun install# 启动开发服务器bun dev# 打开 http://localhost:3000

项目用 Bun 做包管理，启动速度很快。

最后说两句

这个项目目前还在活跃开发中。

它不会取代 Revit，也不会让 Autodesk 破产。但它证明了一件事：

浏览器的能力，远比大多数人想象的要强。

WebGPU + React Three Fiber 这套组合，已经可以在浏览器里跑专业级别的 3D 应用了。

如果你在做 3D 相关的 Web 应用，这个项目非常值得研究。

相关链接：

🔗 Pascal Editor GitHub：https://github.com/pascalorg/editor

🔗 在线演示：https://pascalapp.io

欢迎关注

如果你喜欢这种「工具分享」的内容，欢迎关注短裤哥：持续分享 AI 行业动态、技术分析与工具玩法。