装修前我想先画个3D模型，结果在浏览器里搭出了一套完整的房子

前言装修这件事最让人头疼的环节往往不是施工而是前期沟通。看效果图觉得还行住进去才发现动线不合理、收纳空间完全不够用——等那时候再想改已经来不及了。问题出在前面没有一种简单的方式让自己先看到房子建好之后的样子。专业CAD软件学习成本太高在线设计工具又各种限制想自己搭个模型做个参考整个过程比想象中复杂太多。Pascal Editor这个开源项目解决的就是这个问题。它是一个基于WebGPU的3D建筑编辑器跑在浏览器里不需要任何安装打开就能用。操作方式跟沙盒游戏差不多——画墙、开门洞、开窗洞、加楼梯全是鼠标点击拖拽不需要任何专业知识。你在一面墙上点一门它会自动计算并切割出合适的门洞这种CSG布尔运算本来是工业级CAD软件才有的功能。我装完之后花了大概半小时在里面搭了一套简单的两室一厅。过程中没有任何卡顿WebGPU加速的效果确实流畅。保存后关掉浏览器再打开数据还在。这篇文章记录了从安装到配内网穿透的全过程。Bun作为运行环境两行命令启动项目本地就能跑起来。配了cpolar之后在外面也能打开浏览器访问自己的设计方案不限于在同一台电脑上才能看。1 什么是 Pascal Editor1.1 核心概念Pascal Editor是一款基于 React Three Fiber 和 WebGPU 前沿技术构建的开源 3D 建筑编辑器。它最大的亮点在于能让你像玩沙盒游戏比如模拟人生一样轻松搭建 3D 建筑大片彻底告别传统工业软件冷冰冰的体验它可以丝滑的 3D 构建体验原生支持浏览器运行与现代 WebGPU 硬件加速建模渲染极其流畅不卡顿。超高自由度的层级搭建场地、建筑、楼层、墙体、屋顶一应俱全连门窗、小物件甚至灯光的排布都能随心所欲。全自动几何魔法你在墙上放一扇窗或一扇门它就能实时自动计算并“打洞”切割墙体CSG 布尔运算不用你手动扣洞。随时保存与后悔药内置 50 步的撤销/重做支持并且能把你的作品自动保存在本地持久化存储里关掉网页也不怕数据丢失2 安装环境和启动Pascal Editor2.1 安装Bun运行工具以windows为例首先电脑按【WindowsX】键位然后选择【终端管理员】在弹出的PowerShell窗口中输入如下命令powershell-cirm 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 建立 WebSocketwss://连接时系统会发现请求的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建筑沙盒。对于想提前规划一下自己家装修布局、或者想给装修公司提供参考的人来说这个工具比很多付费在线平台都要顺手。整套方案零成本部署也不复杂有兴趣的可以试试。