开源3D建筑编辑器拆解:React里塞了半个游戏引擎,画墙摆家具全在浏览器跑

上个月我琢磨给家里改个格局，想画张 3D 户型图看看效果。打开电脑一搜，SketchUp 要下客户端，国产几个在线工具要注册会员，手机号一填，第二天就有装修公司打电话过来。

我就想画几面墙，怎么这么费劲。

后来在 GitHub 趋势榜上刷到一个叫 Pascal Editor 的项目：打开网页就能画，画墙、开窗、摆家具、圈院子，全程不用装任何东西。2025 年 10 月才开源，到现在九个月，攒了 17.5k star。我翻完它的 README 和代码结构，觉得这项目有意思的地方，比「免费好用」要多不少。

官方演示视频里的编辑器界面：左侧是节点树，右边直接盖了栋两层小楼

它在网页里干了桌面软件的活

功能上一句话概括：在浏览器里搭建筑。场景按 Site、Building、Level 三层组织，画墙自动处理转角斜接，墙上能开门开窗，天花板能挂灯，楼层可以叠着看、炸开看、也可以单层看。还支持把户型图扫描件传上去当底图，照着描。

渲染走的是 WebGPU，Three.js 的新管线。数据存在浏览器本地的 IndexedDB 里，没有后端依赖。

说实在的，网页版 3D 编辑器我见过不少，大部分模型一多就卡成幻灯片。这个流畅的原因，得扒开架构看。

React 里塞了半个游戏引擎

这一节写给做前端的朋友，它的架构选型挺值得抄。Pascal Editor 没有把 3D 场景塞进 React 组件状态里，走的是游戏引擎的 ECS 思路，数据、渲染、计算三者拆开：

节点是纯数据。墙、楼板、屋顶、家具，全都只是一条记录，存在一个扁平字典里，父子关系靠 parentId 引用，压根没有嵌套树：

Site
└── Building
    └── Level（楼层）
        ├── Wall  → 门、窗
        ├── Slab（楼板）
        ├── Ceiling → 灯具
        ├── Roof（屋顶）
        └── Zone（功能分区）

渲染器是 React 组件。每种节点对应一个 Renderer，职责只有两件事：创建 Three.js 对象，把引用注册进一张全局的对象表。

几何计算绕开 React。真正干重活的是一组 System，跑在每帧的渲染循环里，但只处理「脏节点」。你改了一面墙的厚度，只有这面墙的几何体重算，场景里其他几千个对象纹丝不动：

useScene.getState().updateNode(wallId, { thickness: 0.2 })
// → wallId 被标记为脏节点
// → WallSystem 下一帧只重算这面墙
// → 算完摘掉脏标记

这套脏标记机制就是它不卡的核心。React 负责声明结构和响应交互，几何体更新不走组件 diff，直接在渲染循环里改 Three.js 对象。两边各干各的，互不拖累。

窗户是参数化的：宽高、分栏、窗台，改个数字立刻重新生成几何体

门窗也不是贴图，是参数化构件。选中一扇窗，右侧面板里改宽高、分几栏几行、要不要窗台，几何体实时重建。墙上开洞用的是 three-bvh-csg 做布尔运算，这个库在 Three.js 生态里算布尔运算最快的一档。

状态管理全是前端熟人

场景数据用 Zustand 管，套一层 Zundo 中间件就有了 50 步撤销重做，持久化直接写 IndexedDB，数据校验交给 Zod。整个技术栈没发明任何新轮子，全是 React 生态里天天见的组合：React 19、Next.js 16、React Three Fiber、Turborepo，包管理用 Bun。

地块也是节点：画个多边形，面积和周长自动算出来

我比较喜欢的一个细节：连地块（Property Line）都是节点。画个多边形圈出宅基地，面积、周长自动算好标在侧边栏。整个场景里所有东西共用同一套节点抽象，理解了一种，剩下的全都一个样。

插件和官方功能用同一个接口

项目自带一个种树插件 plugin-trees，能种树、种花、种草。有意思的是它的接口和第三方插件完全一样：同一份 Plugin 清单，声明节点类型、3D 渲染、放置工具、属性面板，官方没给自己留内部特权 API。

想做自己的家具包、构件库，把 plugin-trees 抄一份改改就能跑。开源项目里能把插件机制做到「官方吃自己狗粮」这个程度的，真不算多。

它替代不了专业 CAD

边界也得说清楚。它出不了施工图，没有材料清单、结构计算这些工程功能，定位就是概念设计和可视化，别拿它跟 Revit 比。WebGPU 对浏览器版本有要求，老设备上跑不起来。数据默认躺在本机浏览器里，跨设备同步要靠它官网的账号服务。

我自己只画了个带泳池的两层小楼，节点几百个，很顺。真塞进上万个构件表现怎么样，我没测过，不敢打包票。

想试的话

线上版直接打开 editor.pascal.app 就能用，不用注册。想跑源码的话：

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

官网首页：Create and share 3D architectural projects

MIT 协议，核心的 core 和 viewer 两个包单独发在 npm 上。也就是说你可以不要它的编辑器界面，只把 3D 渲染部分嵌进自己的项目，比如做个房源展示页。

浏览器又啃下一块桌面软件

十年前设计师离不开桌面版的 Photoshop 和 Sketch，后来 Figma 把平面设计整个搬进了浏览器。现在轮到三维：WebGPU 铺开之后，「专业软件必须装客户端」这个老假设，正在一个领域一个领域地松动。

Pascal Editor 未必是终点，但它证明了一件事：浏览器里跑实时 3D 建筑编辑，性能这关已经过了。

你觉得下一个被搬进浏览器的桌面软件会是哪个？评论区聊聊。

本文信息独立采编自 pascalorg/editor 官方 GitHub 仓库与官网公开资料，配图截自官方演示视频与官网页面。