装修前我想先画个3D模型，结果在浏览器里搭出了一套完整的房子
前言
装修这件事，最让人头疼的环节往往不是施工，而是前期沟通。看效果图觉得还行，住进去才发现动线不合理、收纳空间完全不够用——等那时候再想改，已经来不及了。
问题出在前面：没有一种简单的方式让自己先"看到"房子建好之后的样子。专业CAD软件学习成本太高，在线设计工具又各种限制，想自己搭个模型做个参考，整个过程比想象中复杂太多。
Pascal Editor这个开源项目解决的就是这个问题。它是一个基于WebGPU的3D建筑编辑器，跑在浏览器里，不需要任何安装，打开就能用。操作方式跟沙盒游戏差不多——画墙、开门洞、开窗洞、加楼梯，全是鼠标点击拖拽，不需要任何专业知识。你在一面墙上点一门，它会自动计算并切割出合适的门洞，这种CSG布尔运算本来是工业级CAD软件才有的功能。
我装完之后花了大概半小时，在里面搭了一套简单的两室一厅。过程中没有任何卡顿，WebGPU加速的效果确实流畅。保存后关掉浏览器再打开，数据还在。
这篇文章记录了从安装到配内网穿透的全过程。Bun作为运行环境，两行命令启动项目，本地就能跑起来。配了cpolar之后，在外面也能打开浏览器访问自己的设计方案，不限于在同一台电脑上才能看。
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工具，可以直接使用如下命令进行一键拉取项目：
gitclone https://github.com/pascalorg/editor.git如下图：
如果没有git工具，可以前往官方下载git工具：
https://git-scm.com/或者直接访问github项目，点击Download进行下载项目：
https://github.com/pascalorg/editor2.3 运行Pascal Editor项目
进入到editor目录，然后在地址栏输入cmd回车，打开cmd窗口，在cmd终端输入如下命令，进行安装依赖：
buninstall如下图：
安装完成后，直接执行如下命令进行启动即可：
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官网的下载页面
点击立即下载 64-bit按钮,下载cpoalr的安装包:
下来下来是一个压缩包,解压后执行目录种的应用程序,一路默认安装即可,安装完成后,打开cmd窗口输入如下命令确认安装:
cpolar version出现如上版本即代表安装成功!
5.3 注册及登录cpolar web ui管理界面
访问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 建筑设计工作室入口——不管换电脑、换网络、还是换城市，只要服务还在跑，这个地址就永远能用。随手发给朋友、甲方或者自己的手机，随时随地"云建房"！
总结
用下来最直接的感受是：这个东西让"自己动手设计"变成了一件真正可操作的事。不需要学任何专业知识，不需要买任何软件，只需要一台电脑和一个浏览器，就能把自己的想法可视化。
它的定位介于"在线设计工具的玩具感"和"专业CAD软件的高门槛"之间，更像是一个给普通人用的3D建筑沙盒。对于想提前规划一下自己家装修布局、或者想给装修公司提供参考的人来说，这个工具比很多付费在线平台都要顺手。
整套方案零成本，部署也不复杂，有兴趣的可以试试。
—不管换电脑、换网络、还是换城市，只要服务还在跑，这个地址就永远能用。随手发给朋友、甲方或者自己的手机，随时随地"云建房"！
总结
用下来最直接的感受是：这个东西让"自己动手设计"变成了一件真正可操作的事。不需要学任何专业知识，不需要买任何软件，只需要一台电脑和一个浏览器，就能把自己的想法可视化。
它的定位介于"在线设计工具的玩具感"和"专业CAD软件的高门槛"之间，更像是一个给普通人用的3D建筑沙盒。对于想提前规划一下自己家装修布局、或者想给装修公司提供参考的人来说，这个工具比很多付费在线平台都要顺手。
整套方案零成本，部署也不复杂，有兴趣的可以试试。