专业的3D建模软件、动辄上万的软件授权、漫长的学习曲线------这是很多人对建筑建模的第一印象。SketchUp的年费、Revit动辄数千美元的订阅、动辄几个GB的安装包，把绝大多数"想搭个房子看看"的人挡在了门外。然而，一套完整的3D建筑工作流，正在被一个开源项目彻底改写：不需要安装任何软件，打开浏览器就能画墙、放家具、铺地板、盖屋顶；更关键的是，AI Agent可以直接接管你的模型，用自然语言帮你改房型、找小房间、调材质。
这个项目就是Pascal Editor------基于React Three Fiber和WebGPU构建的开源3D建筑编辑器，其官网标语正是"Create and share 3D architectural projects"（创建并分享3D建筑项目）。项目采用MIT开源协议，2026年年中GitHub Star已接近1.9万，连续多周登上GitHub Trending榜，是当前AI建筑建模赛道最受关注的开源项目之一。本文将从项目定位、技术架构、场景引擎、AI赋能、部署实战、功能矩阵、工具对比、应用场景、挑战趋势等维度，系统拆解Pascal Editor的技术实现与落地实践，为建筑师、室内设计师、AI工程师、游戏场景制作人和数字孪生从业者提供完整参考。
一、 Pascal Editor 是什么：浏览器里的免费 3D 建筑工作台
Pascal Editor是一款完全运行在浏览器中的3D建筑编辑器，核心定位是把"专业建筑建模"从桌面级软件下沉到Web端：不用安装、不用注册、不用付费，打开网页即可开始从零搭建建筑项目。与SketchUp式的"自由拉伸建模"不同，Pascal Editor采用数据驱动的"节点场景图"（Node-based Scene Graph）架构------场景中的每一面墙、每一扇窗、每一块楼板都是结构化数据节点，而不是单纯的三角网格，这使它天然具备BIM级别的语义表达能力，也为AI直接编辑场景铺平了道路。
|-------------------------|-----------------------------------------------|-------------------------------------------------------------|
| 核心能力 | 说明 | 技术实现 |
| 浏览器原生 3D 建模 | 免安装、免注册，打开即用；支持墙面、楼板、天花板、屋顶、门窗、家具、分区、地形的一体化设计 | Three.js WebGPU渲染器（WebGL自动兜底），React Three Fiber + Drei组件化3D |
| 数据驱动场景图 | 墙体自动斜接（Mitering）、门窗自动开洞（CSG）、楼层高度结构化存储 | Zod定义节点Schema，Zustand状态管理，three-bvh-csg布尔几何运算 |
| AI 直接编辑场景 | 内置MCP服务器，AI Agent可读取、创建、修改场景节点，浏览器实时同步 | @pascal-app/mcp，90余个工具模块（建墙/放家具/开洞/导出GLB） |
| 素材与材质库 | 内置上百个GLB家具/门窗/设备模型，混凝土/木地板/瓷砖等PBR材质库 | apps/editor/public/items目录+material目录，3D资产即插即用 |
| 格式互通 | 导入Revit等软件导出的IFC模型，导出带贴图的GLB/STL/OBJ | @pascal-app/ifc-converter转换应用，打通BIM与AI编辑工作流 |
| 分享与协作 | 第一人称漫游（Walkthrough）分享，社区作品展示，数字孪生发布 | Web端实时渲染+URL分享，社区平台沉淀作品 |
**与桌面级工具的本质区别：**Pascal Editor不是一个云端SaaS，而是一个可完全自托管的开源引擎。官方提供免费在线版本（editor.pascal.app），开发者也可以拉取源码在本地跑起来（数据保存在本地数据库，无需注册、无需付费）；企业可以基于npm包（@pascal-app/core/viewer/editor）把3D编辑能力嵌入自己的产品；AI Agent则可以通过MCP协议直接驱动整个场景。开源、免安装、AI原生，这三个关键词构成了Pascal Editor区别于传统建筑软件的核心竞争力。
官方把产品工作流概括为三步：Create （创建） ------扫描你的空间翻转成3D，或在浏览器里直接画草图；Edit （编辑） ------移动墙体、替换家具、测试布局、切换风格；Present （呈现）------第一人称漫游进入你的设计，让客户、朋友"走进"尚未建成的空间。
二、技术架构深度解析： Monorepo 三层包 + 三 Store 状态模型
Pascal Editor采用Turborepo Monorepo管理，代码组织遵循清晰的关注点分离原则：整个仓库由三个核心包构成，职责边界极其明确。
Pascal Editor三层技术架构信息图：Next.js应用层（UI组件/墙体工具/家具库/材质库）→核心包层（@pascal-app/core场景核心/@pascal-app/viewer 3D渲染/@pascal-app/editor编辑工具）→基础设施层（WebGPU/Three.js渲染/IndexedDB持久化/IFC转换/MCP服务器）
|------------------------|----------------------------------------|---------------------------------------------------------------------|
| 包 | 职责 | 技术内容 |
| apps/editor | Next.js应用层：UI组件、交互工具、编辑器特定行为 | 工具系统（SelectTool/WallTool/ZoneTool/ItemTool/SlabTool）、选择管理器、编辑器Store |
| @pascal-app/core | 核心引擎：节点Schema定义、场景状态管理、几何生成系统 | Zod Schema、Zustand场景Store、WallSystem/SlabSystem等几何系统、空间查询、事件总线 |
| @pascal-app/viewer | 3D渲染层：React Three Fiber渲染、默认相机/控制器、后处理 | NodeRenderer按类型分发、场景注册表、LevelSystem/ScanSystem/GuideSystem |
核心包均可独立发布到npm：viewer负责以合理默认值渲染场景，editor在viewer之上扩展交互工具、选择管理和编辑能力。这种"渲染与编辑分离"的设计，使开发者可以只引入viewer做纯展示（如数字孪生看板），也可以引入完整editor做可编辑应用。
2.1 三 Store 状态模型
系统采用三个独立的Zustand Store分别管理不同层面的状态，互不污染：
|---------------|--------------------|-----------------------------------------------------------------|
| Store | 所属包 | 职责 |
| useScene | @pascal-app/core | 场景数据：节点（nodes）、根节点ID、脏节点集合、CRUD操作；持久化到IndexedDB，Zundo实现50步撤销/重做 |
| useViewer | @pascal-app/viewer | 视图状态：当前选中对象（建筑/楼层/分区ID）、楼层显示模式（堆叠/爆炸/单独）、相机模式 |
| useEditor | apps/editor | 编辑器状态：当前激活工具、结构层可见性、面板开关、编辑器偏好 |
三个Store的访问模式统一：React组件内用Hook订阅状态（useScene((state) => state.nodes)），回调与系统内用getState()直接读取（useScene.getState().nodesid），兼顾响应式更新与命令式访问。
2.2 技术栈全景
|------------------------------|-----------------------|-----------------------|
| 技术 | 版本/角色 | 作用 |
| React + Next.js | React 19 / Next.js 16 | 应用框架与UI渲染 |
| Three.js | WebGPU渲染器 | 底层3D图形渲染（WebGL自动降级兜底） |
| React Three Fiber + Drei | 最新稳定版 | 声明式3D组件化开发 |
| Zustand | 状态管理库 | 场景/视图/编辑器三Store |
| Zod | Schema验证 | 节点类型定义与运行时校验 |
| Zundo | 时间旅行中间件 | 50步撤销/重做历史 |
| three-bvh-csg | 布尔几何运算 | 门窗开洞、墙体CSG切割 |
| Turborepo + Bun | Monorepo/包管理器 | 多包构建编排与依赖管理 |
| mitt | 事件总线 | 节点事件与网格事件分发 |
三、数据驱动的场景引擎：从网格到 " 会思考 " 的建筑
Pascal Editor最核心的技术创新，是它彻底抛弃了传统建模软件"网格堆砌"（Mesh Soup）的场景表示方式，改用一套完整的节点化数据模型来描述建筑。在这个模型里，建筑不再是一堆三角形的集合，而是一棵语义清晰的节点树：场地（Site）下挂建筑（Building），建筑下挂楼层（Level），楼层下挂墙体（Wall）、楼板（Slab）、天花板（Ceiling）、屋顶（Roof）、分区（Zone）、3D扫描参考（Scan）和2D参考图（Guide）；墙体上再挂门、窗等构件（Item），天花板上挂灯具。每个节点都携带类型、ID、父节点引用和任意元数据，构成完整的建筑信息语义层。
|-------------------------|------------|------------------------|
| 节点类型 | 语义 | 关键行为 |
| Site （场地） | 项目根节点 | 承载多栋建筑与地形信息 |
| Building （建筑） | 单栋建筑 | 组织多个楼层 |
| Level （楼层） | 楼层单元 | 高度结构化存储；堆叠/爆炸/单独三种显示模式 |
| Wall （墙体） | 承重与非承重墙 | 自动斜接（Mitering），CSG布尔开洞 |
| Slab （楼板） | 楼层地面 | 多边形生成地板几何 |
| Ceiling （天花板） | 天花板 | 承载灯具等吊顶构件 |
| Roof （屋顶） | 屋顶 | 屋顶几何生成 |
| Zone （分区） | 房间/功能区域 | 空间查询与语义标记 |
| Item （构件） | 门窗、家具、设备 | 定位到墙面/天花板/楼板，自动计算标高 |
| Scan/Guide （参考） | 3D扫描/2D参考图 | 辅助建模的视觉参考层 |
3.1 扁平字典存储与场景注册表
一个值得注意的实现细节：节点并非以嵌套树结构存储，而是保存在一个扁平字典（Record<id, AnyNode>）中，父子关系通过parentId字段和children数组显式定义。这种扁平化存储带来两大好处：①节点查找O(1)复杂度，任何节点无需遍历即可直接访问；②Zustand的不可变更新更高效，更新任意节点只需替换字典中的单条记录。
与状态层配套的是场景注册表（SceneRegistry）------一个把节点ID映射到Three.js 3D对象的哈希表，同时维护byType索引（wall: Set<id>、item: Set<id>、zone: Set<id>等）。渲染器通过useRegistry Hook注册自己的3D对象引用，几何系统无需遍历场景图即可直接拿到对象并更新几何。
3.2 Systems 几何生成系统与 Dirty 机制
节点只描述"是什么"（数据），几何则由Systems系统实时生成（"怎么画"）。核心包内置WallSystem（带斜接与CSG开洞的墙体几何）、SlabSystem（多边形地板）、CeilingSystem、RoofSystem、ItemSystem（构件在墙面/天花板/楼板上的定位）；viewer包补充LevelSystem（楼层可见性与堆叠/爆炸/单独模式）、ScanSystem（3D扫描可见性）、GuideSystem（参考图可见性）。
系统采用经典的脏标记（ Dirty Flag ）模式：任何节点被创建、更新或删除时，其ID被自动加入useScene的dirtyNodes集合；渲染循环（useFrame）每帧只扫描脏节点集合，为每个脏节点重新计算几何后清空标记。这意味着修改一面墙的厚度，系统只重建这一面墙的几何，其余数千个对象零开销。这是Pascal Editor在浏览器里保持流畅交互性能的关键设计。
3.3 事件总线与空间查询
组件间通信通过mitt实现的类型化事件总线完成：节点事件（wall:click点击墙体、item:enter悬停构件、zone:context-menu分区右键菜单）与网格事件（grid:click点击空白网格）统一分发，事件载荷包含节点、位置、法线等结构化信息，并支持stopPropagation阻止冒泡。空间网格管理器（SpatialGridManager）则负责碰撞检测与放置校验：canPlaceOnFloor判断家具能否放在楼板某位置、canPlaceOnWall判断构件能否挂在墙面上、getSlabElevationAt查询任意坐标的楼板标高，为放置工具提供物理合法性验证。
3.4 完整数据流
Pascal Editor数据流流程图：用户操作（点击/拖拽）→工具处理器→场景状态更新（Zustand创建节点）→节点标记dirty→渲染器注册3D对象→系统重建几何，底部标注实时预览与Zundo 50步撤销重做
一次典型的"画一面墙"操作，在系统内部经历完整闭环：①用户点击/拖拽触发工具处理器（WallTool）；②工具调用useScene.createNode()创建墙体节点并标记dirty；③React重渲染NodeRenderer，useRegistry注册3D对象；④渲染循环中WallSystem检测到脏节点，根据节点数据（起终点、厚度、高度）生成带斜接的墙体几何；⑤清除脏标记，画面呈现新墙。全程数据单向流动，状态可预测、可回放------这正是Zundo 50步撤销/重做能稳定工作的基础。
四、 AI 赋能： MCP 服务器让 AI Agent 直接动手改房子
Pascal Editor最受关注的能力，是它对AI的"原生"支持------不是像传统软件那样靠第三方插件打补丁，而是在架构层面把AI接入作为一等公民设计。项目内置了基于Model Context Protocol（MCP）的服务器（@pascal-app/mcp），把"建墙、放家具、开洞、撤销、导出GLB"等编辑操作全部封装成标准工具暴露给AI主机。
MCP服务器位于packages/mcp/目录，包含创建墙体、放置构件、碰撞检测、导出GLB等90余个工具模块（如packages/mcp/src/tools/create-wall.ts、place-item.ts）。这意味着任何兼容MCP协议的AI助手（Claude、Cursor等）都可以直接读取场景数据、执行编辑操作，而浏览器标签页会通过实时同步把AI的每一次改动直观呈现出来------你可以看着AI"亲手"给你的房子加一扇窗。
官方提供的MCP使用范式展示了AI的完整能力边界：
const space = await pascal.load('building.ifc')await space.agent.run('find rooms under 12m²')
从"加载IFC建筑模型"到"找出所有小于12平米的房间"，AI不仅能编辑几何，还能基于语义做空间推理。在线版本同样内置AI生成能力：直接在模型上涂鸦，笔触会即时转化为实体几何（Generate with AI）；输入需求文本，AI直接生成整栋建筑方案。官方在线演示甚至接入多种大模型（GPT-6 Astra、Fable 5.1、Gemini 3.8），按AI额度计费。
五、部署实战：四种方式最快跑通
Pascal Editor提供从零门槛到深度定制的完整部署梯度：
|-------------------|--------------|----------------------------------|--------------------------------------------------------|
| 部署方式 | 适合人群 | 核心要求 | 启动方式 |
| 官方在线版 | 普通用户（推荐） | 支持WebGPU的现代浏览器（Chrome/Edge），无需安装 | 直接访问editor.pascal.app，打开即用 |
| npx CLI | 开发者快速体验 | Node.js 22.13+ | npx @pascal-app/cli editor，一条命令本地启动 |
| Bun 源码运行 | 深度定制/二次开发 | 安装Bun包管理器 | git clone后bun install，根目录bun dev，访问localhost:3000（热重载） |
| Docker 容器 | 服务器长期运行/团队共享 | Docker环境 | 构建镜像后容器化部署，数据落盘持久化 |
**数据与配置说明：**本地部署的项目数据保存在~/.pascal/data/pascal.db，无需注册、无需付费；开发模式必须在仓库根目录执行bun dev（而非子目录），才能同时启动core/viewer两个包的监听与Next.js编辑器服务，实现packages下的源码改动实时热重载；生产构建用turbo build，构建产物可按需发布到npm（npm publish --workspace=@pascal-app/core等）。
**二次开发入口：**想在自己产品中嵌入Pascal能力，直接安装npm包：@pascal-app/viewer做3D展示（数字孪生看板、房产在线漫游）、@pascal-app/editor做可编辑建模界面、@pascal-app/core做场景数据层、@pascal-app/ifc-converter做BIM格式转换、@pascal-app/mcp让AI Agent驱动场景。所有包MIT协议，可自由商用。
六、功能矩阵与产品工作流
6.1 编辑器核心工具
Pascal Editor通过工具栏激活各类编辑工具，覆盖建筑建模全流程：SelectTool负责选择与操控；WallTool绘制墙体（支持斜接与开洞）；ZoneTool创建房间分区（支持语义标记与空间查询）；ItemTool放置家具与设备（带碰撞检测与标高计算）；SlabTool创建楼层楼板；v1.0 beta进一步加入地形雕刻、垂直建模、楼层堆叠/爆炸显示等能力。选择管理器支持Site→Building→Level→Zone→Items的层级化导航，每一层都有独立的悬停/点击策略。
6.2 产品矩阵：不止一个编辑器
围绕核心编辑器，Pascal团队构建了完整的产品生态：
|-----------------------------------------|-------------|-----------------------------------------------------|
| 产品 | 定位 | 能力 |
| Pascal Editor （ Web ） | 浏览器端3D建筑编辑器 | 建模/编辑/漫游/分享全流程，开源免费 |
| Pascal Capture （ iOS ） | 移动端扫描建模App | SDF/CSG形状像黏土一样融合、雕刻，扫描空间翻转为3D |
| Pascal Studio | 高级渲染器 | 虹彩、全息、玻璃、程序化材质，产出最吸睛的渲染图 |
| Asset Library | 3D资产库 | 数千个现成3D对象，拖入即用可修改 |
| Community | 社区分享平台 | 作品展示与浏览（如Wawa House浏览量近6000），灵感沉淀 |
| @pascal-app/* （ npm 包） | 开发者SDK | viewer/editor/core/nodes/mcp/ifc-converter六件套，MIT协议 |
七、与 SketchUp 、 Revit 对比：三种工具三种定位
在3D建筑建模赛道，Pascal Editor绕不开与两个行业巨头的对比。三者的底层哲学完全不同：
|---------------|-----------------------|-------------------|----------------|
| 对比维度 | Pascal Editor | SketchUp | Revit |
| 运行方式 | 浏览器/本地，免安装 | 桌面客户端（另有Web版） | 桌面客户端 |
| 定价 | 开源免费（MIT协议） | 基础版免费，Pro订阅制 | 订阅制，价格较高 |
| 建模思路 | 数据驱动的节点场景图，结构化语义 | 自由拉伸，直觉式草图建模 | BIM参数化构件，强关联 |
| 学习曲线 | 低 | 低 | 高 |
| AI 集成 | 内置MCP服务器，AI直接改场景 | 依赖第三方 | 依赖第三方插件 |
| 模型语义 | 墙体自动斜接、门窗自动开洞、楼层高度结构化 | 模型是"死的"，改墙不联动房间门洞 | 墙门窗楼层强关联，工程量统计 |
| 数据格式 | IFC导入，GLB/STL/OBJ导出 | SKP原生格式 | RVT原生格式，IFC导出 |
| 适用人群 | 想免费+开源+AI建模的所有人 | 快速概念图的非专业用户 | 正规设计院的BIM出图 |
**一句话总结三者差异：**SketchUp拼快（直觉草图），Revit拼深（BIM严谨），Pascal Editor拼"开放+AI"。Pascal Editor恰好介于两者之间：像Revit一样拥有结构化数据（墙体自动斜接、门窗自动开洞、楼层高度存储），又像SketchUp一样交互直接（拖拽、网格吸附、一键撤销重做）。更关键的是它的格式互通能力------内置IFC转换应用可以把Revit导出的.ifc文件转成Pascal场景JSON并实时预览，意味着你用Revit做的模型可以搬进Pascal Editor继续用AI编辑，两条工作流就此打通。
八、应用场景：谁能用好这台 " 浏览器里的 3D 建筑引擎 "
|---------------------|----------------|-------------------------|--------------------------------------|
| 场景 | 目标用户 | 典型应用 | 关键价值 |
| 建筑师与室内设计 | 独立设计师、设计工作室 | 概念方案推敲、户型改造、室内布局测试 | 零成本起步，快速出概念，客户可第一人称漫游体验 |
| 房产与家装营销 | 房产开发商、家装公司 | 样板间3D展示、户型在线漫游、装修方案预演 | 浏览器分享链接即看即用，无需安装App，转化效率高 |
| 游戏与内容创作 | 游戏设计师、内容创作者 | 游戏场景搭建、虚拟场景制作、短视频3D素材 | 导出GLB/OBJ直通游戏引擎与3D打印 |
| 数字孪生与企业系统 | 数字孪生公司、企业IT | 楼宇数字孪生看板、园区3D管理、设备空间管理 | npm包嵌入自有产品，viewer做展示，editor做编辑，完全私有化 |
| AI Agent 开发 | AI工程师、Agent开发者 | 让AI Agent自主设计户型、按需求改建空间 | MCP协议接入，90余个工具，场景数据可推理 |
| 教育与家庭 | 教育机构、业主、Sims玩家 | 建筑教学、自宅设计、虚拟装修试错 | 免安装低门槛，扫描空间翻3D，像搭积木一样快乐 |
九、挑战与未来趋势
9.1 当前挑战
①浏览器性能天花板： WebGPU虽已大幅提升Web端渲染能力，但极端复杂场景（数万构件+精细材质）的性能仍受浏览器与GPU内存限制，与桌面级软件存在差距；②BIM 深度有限： 相比Revit成熟的参数化族体系、工程量统计与多专业协同，Pascal Editor的BIM语义仍处于"轻量级"阶段，复杂施工图与专业出图尚难替代；③社区生态起步： 家具材质库虽内置上百模型，但相比SketchUp庞大的3D Warehouse生态仍有差距，高质量第三方资产需持续积累；④IFC 转换精度： Revit等软件导出的复杂IFC模型在转换时可能存在几何简化与构件信息丢失，复杂项目需人工修正；⑤AI **生成的确定性：**大模型驱动建模在复杂约束（承重结构、管线避让、规范合规）下的可靠性仍待验证，AI改错需人工兜底。
9.2 未来趋势
①AI 原生建模成为主流范式： 从"人画墙"到"AI生成墙、人改墙"，MCP协议将把更多3D工具接入AI Agent生态，自然语言描述建筑需求将成为标准交互方式；②WebGPU 驱动 Web 端 3D 全面升级： 随着WebGPU在主流浏览器的普及，复杂3D应用将加速从桌面迁移到浏览器，免安装协作成为常态；③数字孪生与 AEC 融合： 建筑信息模型与物联网数据结合，Pascal Editor这类轻量级Web编辑器将成为数字孪生场景的"前端交互层"；④格式互通标准化： IFC/GLB等开放格式的转换工具链将更完善，BIM数据在不同工具间自由流动，"Revit建模+Pascal编辑+AI优化"混合工作流会越来越普遍；⑤**社区生态与商业模式成熟：**开源核心+企业服务（私有化部署、技术支持、资产订阅）的双轨模式将支撑项目长期发展。
十、总结
Pascal Editor以"创建并分享3D建筑项目"为使命，用React Three Fiber和WebGPU把专业级3D建筑建模带进了浏览器，让建筑建模从"安装软件+学习曲线+付费订阅"变成了"打开网页就能画"。技术上，它以数据驱动的节点场景图替代传统网格建模，通过Zustand三Store状态模型、Systems几何生成系统、Dirty标记增量更新机制和空间网格碰撞检测，构建了一套架构清晰、性能可控的Web 3D引擎；生态上，它通过npm六件套（core/viewer/editor/nodes/mcp/ifc-converter）实现了从纯展示到深度编辑再到AI驱动的全栈开放，MIT协议让任何团队都可以自由嵌入与二次开发。
最具想象力的，是它把AI作为架构原生能力而非插件：MCP服务器把90余个编辑工具暴露给AI Agent，AI不仅能"看"场景，还能"动手"改建场景；IFC转换器打通了与Revit等BIM工具的格式壁垒，让"专业建模+AI优化"的混合工作流成为现实。正如官方那句"SketchUp拼快、Revit拼深、Pascal Editor拼开放+AI"，这个项目正在开辟第三条路------用开源与AI重新定义建筑建模的入门门槛。