企业官网建设流程全解析

这是一篇非常详尽的技术教程，核心是教大家如何在本地免费部署一个名为 Pascal Editor 的轻量级3D建筑编辑器，并利用 cpolar 工具实现公网远程访问。

📝本地部署 Pascal Editor 并实现公网远程建模

1. 核心工具与概念

• Pascal Editor: 一个基于 WebGPU 技术的开源、免费的3D建筑编辑器。它最大的特点是操作界面友好，像玩《模拟人生》等沙盒游戏一样，通过点击拖拽就能搭建3D建筑，无需学习传统CAD软件的复杂参数。
• cpolar: 一款内网穿透工具。它能将您自己电脑上运行的 Pascal Editor 服务，生成一个公网地址。这样，您在任何地方用其他设备（如手机、平板）访问这个地址，就能远程操作或展示您的3D作品，无需购买云服务器或配置路由器。

2. Pascal Editor 本地部署全流程 (Windows示例)

第一步：安装运行环境 Bun

• 作用：Bun 是一个快速的JavaScript运行环境，用来启动这个编辑器。
• 操作：
  1. 以管理员身份打开PowerShell终端。
  2. 输入命令安装：powershell -c "irm bun.sh/install.ps1 | iex"
  3. 安装后，关闭并重新打开一个终端，输入bun --version验证，显示版本号（如1.3.12）即成功。

第二步：下载项目文件

• 方法一（推荐，有Git工具）：在终端中运行git clone https://github.com/pascalorg/editor.git
• 方法二（无Git）：直接访问 GitHub 项目地址 (https://github.com/pascalorg/editor) 下载ZIP压缩包并解压。

第三步：安装依赖并启动

1. 在文件资源管理器中进入editor文件夹，在地址栏输入cmd并回车，打开命令提示符。
2. 在打开的cmd窗口中，依次输入并运行以下命令：
   • bun install(安装所需依赖，只需一次)
   • bun dev(启动编辑器)
3. 当终端显示类似Local: http://localhost:3002/的信息时，在浏览器中打开这个地址，看到编辑器界面就说明本地部署成功了！

3. 基础操作体验：像玩游戏一样建模

• 核心界面：
  • 左侧 (Scene)：作品的“大纲”，管理楼层、墙体、家具等。
  • 底部：核心工具区，包含画墙(Wall)、铺地板(Slab)、加楼梯(Stairs)、装门窗(Door/Window)等按钮。
  • 顶部：切换3D透视视角和2D平面俯视视角。
• 快速上手：
  1. 画墙：点击底部Wall→ 在网格地面上点击拖拽画墙，首尾相连即可围成房间。
  2. 开门/窗：点击Door或Window→ 将鼠标悬停在已画好的墙体上并点击，系统会自动计算并在墙上“开洞”安装，完全自动化。
  • 结论：整个过程无需调整参数，完全靠直觉拖拽即可完成基础结构搭建。

4. 公网远程访问配置 (使用 cpolar)

目标：生成一个公网链接，让任何地方都能访问您的3D编辑器。

第一步：安装并登录 cpolar

1. 前往 cpolar官网 下载 Windows 版本安装包并安装。
2. 安装后，在浏览器访问http://127.0.0.1:9200打开 cpolar 的 Web 管理界面，使用注册的账号登录。

第二步：创建隧道 (映射本地端口)

1. 在 cpolar 管理界面左侧，进入隧道管理 → 隧道列表。
2. 点击创建隧道，填写关键信息：
   • 隧道名称：任意，如pascaleditor
   • 本地地址：3002(这是您之前启动Pascal Editor的端口)
   • 地区：选择China Top或离您最近的区域。
3. 点击创建。

第三步：解决公网访问的“白名单”问题

• 现象：创建隧道后，直接访问生成的公网地址（如https://xxxx.cpolar.top）可能页面卡死或报错。
• 原因：Pascal Editor 基于的 Next.js 框架有安全限制，需要将公网域名加入“白名单”。
• 解决方法：
  1. 在您电脑的editor文件夹下，进入apps\editor目录，找到next.config.ts配置文件。
  2. 用记事本等工具打开，在配置项中添加一行代码：

     // 将 '你的公网域名' 替换成 cpolar 实际生成的域名allowedDevOrigins:['你的公网域名.cpolar.top'],

  3. 保存文件，然后刷新之前报错的公网网址，页面即可正常访问。

5. 两种公网访问方案对比

• 如何配置固定域名：升级 cpolar 到付费套餐后，在官网仪表盘“预留”一个固定的二级子域名，然后在本地 cpolar 隧道列表中将该隧道的“域名类型”改为“二级子域名”并填入您预留的名称即可。

💎 总结与行动路径

1. 立即体验：按照笔记第2部分的步骤，最快几分钟内就能在自己电脑上运行起一个专业的3D建筑编辑器，零成本尝试“像玩游戏一样设计建筑”。
2. 实现远程：如需随时随地访问，按第4部分配置 cpolar。先用免费随机域名体验效果。
3. 长期使用：如果觉得好用并需要稳定的远程访问，可考虑升级 cpolar 并配置固定域名，获得一个永久的个人3D设计工作室入口。