Pascal Editor 本地部署实战：Bun 启动 WebGPU 3D 编辑器，再解决公网访问报错

Pascal Editor 本地部署实战：Bun 启动 WebGPU 3D 编辑器，再解决公网访问报错

前言

我对这类 3D 工具一直有个很朴素的要求：如果只是想快速搭一个房间、画几面墙、放门窗，不应该先被一堆专业参数挡在门外。Pascal Editor 吸引我的地方就在这里——它直接跑在浏览器里，用 Scene、Wall、Slab、Door、Window 这些比较直观的工具组织建筑结构，背后再用 React Three Fiber、WebGPU 和 CSG 处理显示与开洞。于是我先在 Windows 上装 Bun，把项目本地跑起来，实际画墙、放门，确认编辑器能用；接着又继续试公网访问。真正的坑也出现在这一步：随机域名能生成，但页面通过公网访问时 WebSocket 报错，最后需要在 next.config.ts 里给 cpolar 域名加入 allowedDevOrigins。把这个问题处理完，再换成固定二级子域名，这套本地 3D 编辑环境才算真正有了一个稳定的远程入口。

1. Pascal Editor 适合什么场景？

Pascal Editor 是一个基于 React Three Fiber 和 WebGPU 的开源 3D 建筑编辑器。

它的使用方式和传统 CAD / BIM 工具不太一样，更偏向浏览器里的交互式搭建。项目提供的主要能力包括：

• 场地、建筑、楼层、墙体、屋顶等层级结构；
• 门、窗、楼梯、家具等元素；
• 2D / 3D 视图切换；
• 门窗放置后的 CSG 布尔开洞；
• 50 步撤销 / 重做；
• 本地持久化保存。

我更愿意把它看成一个适合快速搭建筑白模和空间结构的 Web 编辑器，而不是拿它去替代所有专业建模软件。它的优势是上手直接，真正需要复杂工程参数、出图规范或专业协同时，还要看具体需求。

2. Windows 上先安装 Bun

这次在 Windows 环境操作。

按 Windows + X，打开【终端（管理员）】，在 PowerShell 中执行：

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

安装完成后，先关闭当前 PowerShell，再重新开一个窗口。

执行：

bun –version

这次环境中显示的版本是：

1.3.12

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

3. 下载 Pascal Editor 项目

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

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

如果没有 Git，可以先到官网下载安装：

https://git-scm.com/

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

https://github.com/pascalorg/editor

我这里更关注的是先把项目完整拿下来，不急着改任何配置。后面如果公网访问出问题，再针对实际报错处理。

4. 安装依赖并启动项目

进入 editor 目录以后，在资源管理器地址栏输入 cmd 打开终端。

先安装依赖：

bun install

安装完成后执行：

bun dev

启动后按现有步骤切换到第 3 个选项并回车。

终端会给出本地访问地址和局域网访问地址。

这次使用的是：

http://localhost:3002/

页面能打开，说明 Bun、依赖和 Pascal Editor 开发服务这一层都已经跑起来了。

5. 先别急着公网访问，先确认编辑器真的能用

5.1 Scene 和基础工具

左侧的 Scene 区域可以理解成场景结构树。

其中会看到类似：

• Level 0
• Structure
• Furnish
• Zones

底部则是常用建造工具，包括：

• Wall
• Slab
• Stairs
• Door
• Window

顶部可以切换 3D 透视视角和 2D 俯视平面。

这一套界面最明显的特点，就是很多操作直接围绕“画什么、放什么”展开，不需要先进入大量参数面板。

5.2 我先画四面墙，再放一扇门

先选择 Wall。

在网格场景中点击起点，再拖到另一个位置确定终点；如果需要非 45 度角，可以按住 Shift 自由拉线。

墙体围起来以后，再选择 Door 或 Window。

把鼠标移动到墙体上并点击，系统会自动处理开洞。

这个过程里真正让我觉得它和传统建模工具思路不同的地方，是门窗并不是“先手工扣洞，再塞模型”，而是编辑器自己根据放置位置做 CSG 布尔切割。

继续往下搭，可以得到更完整的建筑结构。

到这里，本地功能已经完成最基本验证：

项目启动 → Scene 可用 → 画墙 → 放门窗 → 2D / 3D 查看。

6. 接下来我才开始折腾公网访问

本地地址是：

localhost:3002

它只能在当前电脑上直接访问。

如果想在外部网络打开 Pascal Editor，就需要再解决 Web 服务的公网入口。这里使用 cpolar，把本机的 3002 服务映射出去。

7. Windows 安装 cpolar

进入 cpolar 下载页面，下载 64-bit 安装包。

解压并安装后，在 CMD 中确认版本：

cpolar version

能看到版本信息以后，再注册和登录管理后台。

进入注册页面完成账号注册。

然后访问本地 Web UI：

http://127.0.0.1:9200

使用注册好的账号登录。

到这里，Pascal Editor 和 cpolar 都已经分别正常运行。

8. 先创建随机域名隧道

进入【隧道管理 → 隧道列表】。

默认可以看到：

• remoteDesktop → 3389 / TCP
• website → 8080 / HTTP

这次新建一条 Pascal Editor 隧道。

配置为：

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

创建完成以后，到【状态 → 在线隧道列表】查看生成的地址。

这次拿到的 https 示例地址是：

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

按理说，到这里应该可以直接打开页面。

但我第一次访问时并没有这么顺。

9. 真正的坑在这里：公网地址有了，页面却打不开

把公网地址放进浏览器以后，页面一直加载。

打开 F12 开发者工具，可以看到报错。

这一步很容易误判成“隧道没通”，但实际上公网地址已经能够把请求送到本地服务，问题出在 Pascal Editor 使用的 Next.js 开发服务器。

通过公网域名访问时，请求的 Host、Origin 与本地开发环境不同，WebSocket 连接会受到开发环境的来源校验影响。

所以真正要处理的是：

allowedDevOrigins

而不是继续反复删隧道重建。

10. 在 next.config.ts 里加入公网域名

打开项目中的：

apps\\editor\\next.config.ts

把实际生成的 cpolar 域名加入允许列表。

配置记录如下：

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

这里有一个非常关键的点：

47c72095.r1.cpolar.top 只是这次随机域名示例，实际使用时必须换成自己当前生成的域名。

保存以后，回到浏览器刷新。

页面可以正常加载。

这次问题真正解决以后，我才确认整条随机公网访问链路是通的：

Pascal Editor 3002 → cpolar 随机域名 → Next.js allowedDevOrigins → 公网页面正常加载。

11. 随机域名能用，但白名单也会跟着变

随机域名适合测试。

现有流程里，随机地址大约每 24 小时会变化一次。对普通 Web 页面来说，地址变化已经够麻烦；对 Pascal Editor 这次的配置来说，还多了一层问题：

域名一变，allowedDevOrigins 里的白名单也要跟着改。

所以如果准备长期使用固定入口，固定二级子域名会更合适。

12. 配置固定二级子域名

进入预留页面：

https://dashboard.cpolar.com/reserved

在【保留二级子域名】里填写地区、名称和描述。

这次记录的是：

• 地区：China TOP
• 二级域名：pedit

每个账号实际可保留的名称不同，以自己的配置为准。

然后回到本地 cpolar 管理页面：

http://127.0.0.1:9200

进入【隧道管理 → 隧道列表】，找到之前的：

pascaleditor

点击编辑，把域名类型从随机域名改为【二级子域名】。

在 Sub Domain 中填写：

pedit

然后更新。

到【状态 → 在线隧道列表】查看，公网地址已经变成固定二级子域名形式。

13. 换成固定域名后，别忘了再改一次白名单

这里是最容易漏掉的一步。

前面 next.config.ts 中写的是旧随机域名。

现在公网域名已经变成固定地址，allowedDevOrigins 当然也要一起更新。

把旧随机域名替换成当前固定域名以后保存。

再通过固定公网地址访问。

页面可以正常打开。

这时整条链路才算真正稳定下来：

本地 3002 → pascaleditor 隧道 → 固定二级子域名 pedit → allowedDevOrigins 同步更新 → 公网访问成功。

总结

Pascal Editor 真正让我觉得有意思的，不是“像玩游戏一样建房”这句描述，而是它确实把不少基础建筑操作做成了比较直观的浏览器交互：Scene 管层级，Wall 画墙，Door / Window 放到墙上后自动开洞，2D 和 3D 视图也可以随时切换。

这次从本地到公网实际跑通的链路包括：

• Windows；
• Bun 1.3.12；
• git clone https://github.com/pascalorg/editor.git；
• bun install；
• bun dev；
• http://localhost:3002/；
• Scene；
• Wall；
• Door / Window；
• Shift 自由拉线；
• CSG 自动开洞；
• cpolar；
• 127.0.0.1:9200；
• 隧道 pascaleditor；
• 本地端口 3002；
• China Top；
• 随机 https 域名；
• apps\\editor\\next.config.ts；
• allowedDevOrigins；
• 固定二级子域名 pedit；
• 固定域名更新后再次同步白名单。

这里最值得记住的反而不是安装命令，而是公网访问时那个报错：隧道创建成功，不代表前端开发服务器一定接受新的公网 Origin。 真遇到页面一直加载、WebSocket 报错时，先看浏览器控制台和 Next.js 的来源限制，比反复重建隧道更有效。