前言
你是不是也遇到过这种情况：脑子里对未来的家有个完美的构想，或者想为自己的沙盘画个 3D 建筑结构，结果一打开 AutoCAD 或者 SketchUp，直接被满屏幕密密麻麻的专业参数搞到崩溃？明明只是想简单搭个白模空间，却被枯燥的学习门槛折腾到怀疑人生。
市面上虽然也有各种主打“轻量级”的家装在线设计软件，确实能帮你搞定一些基础的平面布局和简单 3D 预览。
但转折点就在这里，那些所谓的“傻瓜式”在线设计网站，要不然自由度极差只能套模板，要不然就是个变相吞金兽——想用特定模型要充 VIP，存个高清图还得掏钱。想痛痛快快、不受限制地自己搭个喜欢的建筑模型，怎么就这么难？
好消息是——今天给你介绍个神级开源项目 Pascal Editor。让你彻底摆脱束缚！读完这篇文章，你不仅能手把手在家零成本部署这款“像玩游戏一样丝滑”的 WebGPU 3D 建筑编辑器，还能学到如何通过 cpolar 内网穿透魔法，让你在通勤路上也能随时随地在公网远程建图，真正实现免费且自由的 3D 建筑创作！
1 什么是 Pascal Editor？
1.1 核心概念
Pascal Editor 是一款基于 React Three Fiber 和 WebGPU 前沿技术构建的开源 3D 建筑编辑器。它最大的亮点在于，能让你像玩沙盒游戏（比如模拟人生）一样轻松搭建 3D 建筑大片，彻底告别传统工业软件冷冰冰的体验！
它可以：
- 丝滑的 3D 构建体验：原生支持浏览器运行与现代 WebGPU 硬件加速，建模渲染极其流畅不卡顿。
- 超高自由度的层级搭建：场地、建筑、楼层、墙体、屋顶一应俱全，连门窗、小物件甚至灯光的排布都能随心所欲。
- 全自动几何魔法：你在墙上放一扇窗或一扇门，它就能实时自动计算并“打洞”切割墙体（CSG 布尔运算），不用你手动扣洞。
- 随时保存与后悔药：内置 50 步的撤销/重做支持，并且能把你的作品自动保存在本地持久化存储里，关掉网页也不怕数据丢失！
2 安装环境和启动Pascal Editor
2.1 安装Bun运行工具
以windows为例，首先电脑按【Windows+X】键位，然后选择【终端（管理员）】，在弹出的PowerShell窗口中输入如下命令：
powershell -c "irm bun.sh/install.ps1 | iex"
如下图：
关闭当前的PowerShell窗口，重新开一个新的窗口输入如下命令进行验证版本信息：
bun --version
如下图，如果能显示 1.3.12，就说明一切正常：
2.2 下载Pascal Editor项目
如果你有git工具，可以直接使用如下命令进行一键拉取项目：
git clone https://github.com/pascalorg/editor.git
如下图：
如果没有git工具，可以前往官方下载git工具：
https://git-scm.com/
或者直接访问github项目，点击Download进行下载项目：
https://github.com/pascalorg/editor
2.3 运行Pascal Editor项目
进入到editor目录，然后在地址栏输入cmd回车，打开cmd窗口，在cmd终端输入如下命令，进行安装依赖：
bun install
如下图：
安装完成后，直接执行如下命令进行启动即可：
bun dev
然后切换到第3个，进行回车如下图：
输入了一个本地访问地址和局域网访问地址，我们直接在浏览器中访问：
http://localhost:3002/
如下图：
可以看到成功的访问到页面啦!这样项目就在本地部署跑起来了！
3 简单体验
进入界面后，你是不是被这极其清爽的 UI 惊呆了？没有乱七八糟的满屏浮窗，只有核心工具！接下来咱们简单上手“玩”一下：
3.1 熟悉界面与基础工具
整个界面布局非常直观，仿佛专为新手准备：
- 左侧核心栏 (Scene)：可以理解为你作品的“大纲”。你的建造是从一层层（Level 0）加上去的，包含结构（Structure）、家具（Furnish）、区域（Zones）。
- 底边栏快捷键：看到了吗？最显眼的一排功能框：画墙（Wall）、铺地板（Slab）、加楼梯（Stairs）、装门窗（Door / Window）。点哪个，哪就能盖！
- 顶配视角控制：在最上面，可以随心切换 3D（透视）和 2D（俯视平面图）视图，让你随时能像上帝视角一样俯瞰自己的杰作。
3.2 简单操作和使用
咱们来建最简单的四面墙加个门：
- 画墙：在底部面板点击“Wall”（墙体工具），然后鼠标在中间带网格的大平地上点一下作为起点，拖拽到另一个位置点一下作为终点。想要不羁的非45度角？按住
Shift键随意拉拽即可！首尾相连，你的毛坯房就初具雏形了。
- 打洞与放门：觉得屋子闷？点击底部面板的“门”（Door）或“窗”（Window），直接将鼠标悬停在刚刚建好的墙上并点击。见证奇迹的时刻到了：系统自动给你计算开洞，完美贴合！
看！根本不需要去弄懂那一堆让人头皮发麻的专业参数，就像咱们小时候搭乐高一样，轻松点几下鼠标，一间精巧的屋子就拔地而起了！当然，这仅仅是开胃小菜，只要你稍微发挥一点想象力，它甚至能让你搭出和官方演示一样震撼的梦中情中：
是不是瞬间觉得电脑里那些难啃的传统建模软件都不香了？这种沉浸式“造房”爽感，真的试一次就停不下来！
4 下载安装cpolar
目前这个超赞的建筑编辑器虽然好玩，但它只能通过 localhost:3002 在你所在的这台电脑上“孤芳自赏”。这怎么能让人满足呢？要是你费半天劲搭好了一个精装大别墅，想要立刻发到手机上让朋友“云参观”一下，或者出门在外突然来了灵感，想要随时随地掏出手机调整设计方案，该怎么办？
答案非常简单：我们需要一款强大的内网穿透神器——cpolar！只需要简单几步操作，它就能像施了魔法一样，把你本地的编辑器一键投射到公网上。不仅免去了买云服务器的昂贵费用，更完全不需要你去折腾复杂的路由器配置。接下来，咱们就来看看怎么把这个出门炫耀方案必备的神器装进电脑！
4.1 什么是cpolar?
- cpolar 是一款内网穿透工具，可以将你在局域网内运行的服务（如本地 Web 服务器、SSH、远程桌面等）通过一条安全加密的中间隧道映射至公网，让外部设备无需配置路由器即可访问。
- 广泛支持 Windows、macOS、Linux、树莓派、群晖 NAS 等平台，并提供一键安装脚本方便部署。
4.2 下载安装cpolar
打开cpolar官网的下载页面：https://www.cpolar.com/download
点击立即下载 64-bit按钮,下载cpoalr的安装包:
下来下来是一个压缩包,解压后执行目录种的应用程序,一路默认安装即可,安装完成后,打开cmd窗口输入如下命令确认安装:
cpolar version
出现如上版本即代表安装成功!
5.3 注册及登录cpolar web ui管理界面
官网链接：https://www.cpolar.com/
访问cpolar官网，点击免费注册按钮，进行账号注册
注册完成后,在浏览器中输入如下地址访问 web ui管理界面:
http://127.0.0.1:9200
输入刚才注册好的cpolar账号登录即可进入后台页面:
5 穿透Pascal Editor以实现公网访问
刚才我们已经成功安装并登录了 cpolar，万事俱备，只欠东风。接下来，我们只需要将运行在本地的 Pascal Editor 服务（默认端口通常为3000或者顺延端口，文中显示为3002）通过 cpolar 映射出去，就能立刻获得一个公网访问地址。
5.1 随机域名方式(免费方案)
随机域名方式适合预算有限的用户。使用此方式时，系统会每隔 24 小时 左右自动更换一次域名地址。对于长期访问的不太友好，但是该方案是免费的，如果您有一定的预算，可以查看 大纲5.2 的固定域名方式，且访问更稳定。
首先，点击左侧菜单栏的【隧道管理】，展开进入【隧道列表】页面，页面下默认会有 2 个隧道：
- remoteDesktop隧道，指向3389端口，tcp协议
- website隧道，指向8080端口，http协议（http协议默认会生成2个公网地址，一个是http，另一个https，免去配置ssl证书的繁琐步骤）
点击创建隧道，进入到创建隧道页面，填写一个【隧道名称】、这里填写为【pascaleditor】，然后【本地地址】填写pascaleditor的端口【3002】，选择一个地区，这里选择为China Top，然后点击创建按钮：
创建完成后，来到【状态】下的【在线隧道列表】可以看到我们创建的隧道已经显示在了列表中了：
以https为例，让我们访问测试一下：
https://47c72095.r1.cpolar.top
满心欢喜地复制公网地址到浏览器，结果页面是不是一直卡着，打开 F12 开发者工具一看，还报了一堆错？
别慌，这可不是你操作失误！这是因为咱们用了 Next.js 框架，它的开发服务器默认加上了极其严格的【同源策略与 CSRF 防护】。当咱们通过公网 Web 建立 WebSocket（wss://）连接时，系统会发现请求的 Host 和 Origin 跟它本地预期的不一样，直接警觉地把连接给“掐断”了。
解决办法也非常简单。打开项目里的 apps\editor 目录，找到大管家配置文件——next.config.ts。在配置项里加一行代码，给你的 cpolar 域名开个“白名单”专属通道：
// 注意：将里面的域名替换成你自己实际生成的 cpolar 域名哦！
allowedDevOrigins: ['47c72095.r1.cpolar.top'],
一键保存后，再切回刚才报错的浏览器页面，轻轻按下刷新（F5）。
见证奇迹的时刻到了！控制台一片清爽，页面瞬间丝滑加载。这样，你就彻底打通了局域网与公网的壁垒。现在只需带上一部手机或者轻薄本，就能在任何地方随时进入你一手打造的 3D 建筑工作室了！
5.2 固定域名方式（升级任意套餐皆可）
上面的随机域名方案虽然能白嫖，但有一个绕不开的”小烦恼”——每 24 小时域名地址就会自动刷新一次。这意味着什么呢？你昨晚精心搭好的模型，今天想在手机上给甲方或朋友分享链接炫耀一下，结果发现地址已经失效了，还得重新回到 cpolar 后台去复制新地址，来回折腾非常不优雅。
如果你希望拥有一个永久固定、随时可用的专属访问地址——比如 pedit.cpolar.top 这样简洁好记的链接，发给谁都能直接打开，那只需将 cpolar 升级到任意付费套餐，配置一个固定二级子域名就能搞定！操作同样非常简单：
首先，进入官网的预留页面:
https://dashboard.cpolar.com/reserved
然后，选择【预留】菜单，即可看到【保留二级子域名】项，填写其中的【地区、名称、描述（可不填）】项，然后点击【保留】按钮，操作步骤图如下：
列表中显示了一条已保留的二级子域名记录：
- 地区：显示为China TOP。
- 二级域名：显示为pedit。
注：二级域名是唯一的，每个账号都不相同，请以自己设置的二级域名保留的为主
保留成功后，回到本地 cpolar 管理界面（http://127.0.0.1:9200），进入侧边菜单栏的【隧道管理】→【隧道列表】，找到我们之前创建的那条 pascaleditor 隧道：
点击右侧的【编辑】按钮，将域名类型从”随机域名”改为【二级子域名】，并在 Sub Domain 栏中填入你刚才保留好的名称（比如 pedit），最后点击【更新】：
更新完毕！接着来到【状态】→【在线隧道列表】，你会发现公网地址已经从之前那串随机字符串，变成了清清爽爽的固定二级子域名格式：
还记得前面我们踩过的”同源策略”坑吗？域名变了，白名单当然也得跟着更新。打开项目里的 next.config.ts，把 allowedDevOrigins 中的旧随机域名替换为你刚配好的固定域名即可：
保存后，在浏览器里直接输入你的专属固定地址进行访问：
完美！页面秒开，丝滑依旧。从此以后，这个链接就是你永久的 3D 建筑设计工作室入口——不管换电脑、换网络、还是换城市，只要服务还在跑，这个地址就永远能用。随手发给朋友、甲方或者自己的手机，随时随地”云建房”！
总结
本教程带你从零搭建了一个基于 WebGPU 的开源 3D 建筑设计神器——Pascal Editor，从安装运行环境到亲手画墙、开门、搭建属于自己的虚拟建筑，再到通过cpolar 内网穿透让本地服务一键飞上公网，整个流程一气呵成。
- 极简部署：只需安装 Bun + 拉取项目 + 两行命令，本地即刻跑起一个专业级 3D 建筑编辑器，零门槛上手。
- 沉浸式”搭积木”体验：告别传统建模软件的参数地狱，画墙、开窗、装门全靠鼠标点击拖拽，CSG 布尔运算自动帮你精准打洞，像玩游戏一样轻松。
- 随时随地公网访问：借助 cpolar 的随机域名（免费）或固定二级子域名方案，无论你在咖啡厅、地铁还是客户会议室，掏出手机就能打开你的 3D 设计工作室。
从一个灵感到一张随时可展示的 3D 互动图纸，中间只差这篇教程的距离。还在等什么？赶紧动手搭一个属于你的梦想空间吧！
感谢您阅读本篇文章，有任何问题欢迎留言交流。 cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站
