浏览器里搞定3D建筑建模：Claude Code驱动的Pascal Editor开源实战

想不想在浏览器里像搭积木一样，快速搞定一套3D建筑模型？Pascal Editor 就是这样一款基于 React Three Fiber 和 WebGPU 前沿技术构建的开源3D建筑设计器。它最大的亮点，就是彻底告别传统工业软件那种冷冰冰的体验，让你像玩沙盒游戏一样轻松搭建出3D建筑大片。

• 丝滑的3D构建体验：原生支持浏览器运行，配合现代 WebGPU 硬件加速，建模渲染极其流畅，不会出现卡顿。
• 超高自由度的层级搭建：场地、建筑、楼层、墙体、屋顶一应俱全。连门窗、小物件甚至灯光的排布，你都能随心所欲地控制。
• 全自动几何魔法：在墙上放一扇窗或一扇门，它能实时自动计算并在墙体上精准“打洞”（CSG 布尔运算），完全不用你手动去扣洞。
• 随时保存与后悔药：内置50步的撤销/重做支持，还能把你的作品自动保存到本地持久化存储里。关掉网页也不怕数据丢失！

架构概览

出乎你的想象，Pascal Editor 由 Claude Code 驱动开发，核心基于 WebGPU 技术，并采用了 Monorepo 架构。传统3D建模软件中最常用的选择、墙体、区域、视角、装置等工具，都被它巧妙地整合在了一起，一经发布就在 GitHub 上迅速走红。

Pascal Editor 的代码分层极其清晰：

• Core 层：负责核心逻辑，包括几何计算、场景数据结构、序列化与反序列化。
• Viewer 层：处理渲染相关事务，负责将 Core 层的数据变成可见的3D画面。
• Editor 层：承载所有交互逻辑，处理用户输入、选中、拖拽等操作。
• UI 层：包含了侧边栏、工具栏、属性面板等界面组件。

分层最大的好处是解耦。Core 层可以独立运行，Editor 层也能根据需要替换不同的 Viewer 实现，这为后续的功能扩展提供了极大的便利。

与付费软件掰手腕？

那么，它和传统的 AutoCAD、Revit 等软件比，优势在哪？

技术选型：为什么是 React Three Fiber？

Pascal Editor 基于 React Three Fiber（R3F）构建。R3F 是 Three.js 的 React 封装，它把3D场景变成了组件化的声明式编程，天然具备三大优势：

• 状态管理清晰：React 的 state/props 体系，天生就适合处理 UI 交互。
• 逻辑复用方便：3D元素可以像 React 组件一样被封装和复用。
• 生态成熟：React DevTools、状态管理库、测试框架等工具链都能无缝衔接。

我们不妨对比一下传统的写法。这是原生 Three.js 创建一个方块：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

而 Pascal Editor 基于 R3F 的写法，则直观得像写 HTML：

<Canvas>
  <mesh>
    <boxGeometry />
    <meshBasicMaterial color="green" />
  </mesh>
</Canvas>

场景覆盖与二次开发

如今，Pascal Editor 已覆盖建筑设计、室内装修及教育学习等多种场景。普通用户可以用它快速搭建房屋3D模型来规划装修布局；建筑系学生能免费完成2D与3D联动的课程作业；小型设计团队则可以通过链接分享方案给客户演示，并基于其开源协议进行功能定制。

你也想为它添砖加瓦？这个项目为开发者清晰地拆解了四大方向：

Pascal Editor 开源项目地址：https://github.com/pascalorg/editor

想本地跑起来体验，只需几步：

git clone https://github.com/pascalorg/editor
cd pascal-editor
npm install
npm run dev

如果你也是一个热衷于探索前沿技术，乐于在社区分享交流的开发者，这无疑是个值得深入研究的项目。在这个过程中，你不仅能掌握 WebGPU 落地的宝贵经验，还能洞见3D与前端工程化深度融合的更多可能。