Pascal Editor 3D建筑编辑：墙体门窗、2D与3D视图及WebGPU建模

前言

Pascal Editor 是一款运行在浏览器中的 3D 建筑编辑器，现有材料把它的特点集中在 WebGPU、层级场景、墙体与门窗编辑、2D 与 3D 视图切换，以及门窗放置时的自动几何开洞等能力上。对于只想快速搭建筑白模或空间结构的人，它的操作路径比传统专业建模软件更直接。

本文按照现有操作顺序展开：先在 Windows 安装 Bun，确认 bun --version 正常，再通过 Git 获取 Pascal Editor 项目，执行 bun install 和 bun dev，最终从 http://localhost:3002/ 打开编辑器。

页面启动以后，不停留在"项目跑起来"这一层，还会继续验证 Scene、Wall、Slab、Stairs、Door、Window、2D 与 3D 视图，以及画墙和放置门窗等基础操作。

本地建模链路确认无误后，再补充远程访问。文章还保留了一个关键排错过程：公网地址建立后页面报错，需要在 next.config.ts 中配置 allowedDevOrigins，固定域名变更后白名单也要同步更新。

整篇重点放在"环境---启动---建模操作---远程访问---Origin 修复"这条完整链路，而不是只介绍软件功能。

对于第一次接触这类浏览器 3D 编辑器的人来说，先确认本地建模功能，再单独处理远程访问，会比把运行环境和网络问题混在一起更容易排查。

这样每一步都有明确的验证点，也更适合第一次接触 Pascal Editor 的人跟着复现。

1 什么是 Pascal Editor？

如果只是想快速搭一个空间结构，传统建模软件的完整能力有时候反而会变成门槛。

Pascal Editor 的思路更偏向浏览器里的交互式建筑编辑：把场地、楼层、墙体、屋顶、门窗、物件和灯光等元素放进一套层级场景里，再通过鼠标直接操作。

现有材料中提到的几个特点包括：

基于 React Three Fiber 和 WebGPU；
支持浏览器里的 3D 构建；
场地、建筑、楼层、墙体、屋顶等分层组织；
门窗放到墙体时可以自动进行几何开洞；
支持撤销 / 重做；
支持本地持久化保存。

我更在意的不是这些功能写在列表里，而是后面实际进入页面以后，画墙、放门窗和视图切换是不是足够直接。

2 安装环境并启动 Pascal Editor

2.1 在 Windows 安装 Bun

先用管理员方式打开 PowerShell，执行：

shell 复制代码

powershell -c "irm bun.sh/install.ps1 | iex"

安装完成以后，关闭当前 PowerShell，再重新打开一个窗口验证：

shell 复制代码

bun --version

现有演示中显示版本为 1.3.12：

能正常返回版本号以后，再继续拉取项目。

2.2 下载 Pascal Editor 项目

如果已经有 Git，可以直接执行：

shell 复制代码

git clone https://github.com/pascalorg/editor.git

如果没有 Git，原稿给出的下载地址是：

shell 复制代码

https://git-scm.com/

也可以直接打开 Pascal Editor 的 GitHub 项目页：

shell 复制代码

https://github.com/pascalorg/editor

到这里，项目文件准备完成。

2.3 安装依赖并启动

进入 editor 目录，在地址栏输入 cmd 打开终端，然后执行：

shell 复制代码

bun install

依赖安装完成后启动：

shell 复制代码

bun dev

按照现有演示切换到第 3 个入口：

然后访问：

shell 复制代码

http://localhost:3002/

页面能够正常打开以后，Pascal Editor 的本地运行链路就完成了。

我会把这里看成第一个检查点：不是 Bun 装好了就结束，也不是依赖装完就结束，而是浏览器真正能看到编辑器页面。

3 先实际搭一间最简单的房子

3.1 先熟悉界面

Pascal Editor 的界面可以先从三个区域理解。

Scene 场景层级

左侧 Scene 可以理解为当前作品的大纲，里面包含楼层和不同类型的对象。

底部建造工具

底部可以看到 Wall、Slab、Stairs、Door、Window 等工具：

2D / 3D 视图

顶部可以在 3D 透视和 2D 俯视视图之间切换：

对于刚开始搭空间的人来说，这种布局比先记一堆快捷键更容易理解。

3.2 画墙

先选择 Wall，在网格中点击起点，再拖到终点。

现有操作里还提到，如果想画非 45 度角，可以按住 Shift 调整。

把几段墙体首尾连接以后，一个最基础的空间轮廓就出来了。

3.3 放门窗并自动开洞

接下来选择 Door 或 Window，把鼠标放到墙体上进行添加。

现有演示中，门窗加入以后会在墙体上自动形成对应开口，不需要再单独手工切洞。

继续往下，还可以搭出更完整的建筑：

到这里，Pascal Editor 真正有辨识度的地方就出来了：它不是单纯展示 3D 场景，而是把墙体、门窗和建筑层级做成了一套可以直接操作的编辑方式。

4 本地建模跑通以后，再处理远程访问

目前 Pascal Editor 通过本地 3002 端口访问。

如果只在当前电脑上使用，前面的流程已经够了。

如果还希望在其他设备或外部网络打开，再继续增加网络入口。

这里 cpolar 只负责把已经运行的 Pascal Editor Web 服务带到外部网络，并不参与建模本身。

4.1 cpolar 的作用

原稿中把 cpolar 用作本地 Web 服务的远程访问入口。

4.2 Windows 安装 cpolar

进入 cpolar 下载页面，下载安装包：

安装完成以后，在 CMD 中验证：

shell 复制代码

cpolar version

能够显示版本信息以后，再继续登录 Web UI。

5 注册并登录 cpolar Web UI

先在官网注册账号：

进入注册页面：

注册完成以后，在浏览器访问：

shell 复制代码

http://127.0.0.1:9200

输入账号登录：

到这里，网络入口工具已经准备完成。

6 给 Pascal Editor 创建远程访问地址

6.1 创建随机域名隧道

进入隧道列表，可以看到默认已有的隧道：

接着创建新的 Pascal Editor 隧道。

现有配置中：

隧道名称：pascaleditor
本地地址：3002
地区：China Top

创建以后，在在线隧道列表查看：

原稿使用下面的 HTTPS 地址做测试：

shell 复制代码

https://47c72095.r1.cpolar.top

但这里并没有"一创建公网地址就结束"。

实际访问时，页面出现了报错：

这也是这篇里最值得保留的一段，因为它说明公网地址生成成功，不代表前端开发服务器已经接受这个外部 Origin。

7 解决公网访问时的 Origin / WebSocket 报错

现有材料把问题定位到 Next.js 开发服务器对外部 Origin 的限制。

处理方式是在项目的 apps\editor 目录中找到 next.config.ts，加入：

typescript 复制代码

// 注意：将里面的域名替换成你自己实际生成的 cpolar 域名哦！
allowedDevOrigins: ['47c72095.r1.cpolar.top'],

这里的域名要替换成自己实际生成的地址。

保存以后重新刷新页面：

页面恢复正常。

对我来说，这一步比单纯"映射 3002 端口"更重要。因为真正的远程访问验证，应该是外部地址不仅能连上，而且前端页面和 WebSocket 也能正常工作。

8 配置固定二级子域名

随机域名适合测试，如果后面长期使用，再继续配置固定地址。

进入预留页面：

shell 复制代码

https://dashboard.cpolar.com/reserved

然后选择保留二级子域名：

现有示例中：

地区：China TOP
二级域名：pedit

保留完成以后，回到本地 cpolar 隧道列表：

编辑 pascaleditor 隧道，把域名类型改成二级子域名，并填入前面保留的名称：

更新后，再查看在线隧道：

8.1 域名变了，Origin 白名单也要一起改

这里还有一个容易忘的点。

前面 allowedDevOrigins 写的是随机域名；固定域名配置完成以后，域名已经变了，所以项目里的白名单也要一起更新。

把旧随机域名替换成新的固定域名以后，再用固定地址测试：

这样，固定远程入口和前端 Origin 配置才真正对应起来。

9 Pascal Editor 更适合什么场景

我不会把 Pascal Editor 写成传统 CAD 或专业 BIM 软件的替代品。

从这篇实际操作来看，它更适合：

快速搭建筑白模；
做房间和空间概念草图；
通过墙体、门窗和楼层快速表达结构；
在浏览器里体验更直接的 3D 建筑编辑；
需要在不同设备上继续打开同一个编辑工具的场景。

它最有意思的地方不是"专业参数更少"，而是把建筑编辑做成了更接近交互式搭建的过程。

总结

整套流程可以拆成三层：Bun 和项目依赖负责把 Pascal Editor 跑起来；编辑器本身负责墙体、门窗、场景层级和 2D / 3D 建模；远程访问部分负责把 3002 Web 服务带到外部网络。

本地启动以后，还要继续做画墙、门窗放置和视图切换等实际验证。只有这些基础操作都能正常工作，才能说明编辑器本身已经真正可用。

远程部分则多了一层 Origin 配置。公网隧道创建成功后，如果页面和 WebSocket 仍报错，需要继续处理 allowedDevOrigins；随机域名换成固定域名后，对应白名单也要同步更新。

这篇真正有辨识度的地方，不是"部署一个 Web 项目"，而是把浏览器 3D 建筑编辑和一次真实的远程访问排错过程串在了一起。