Antigravity + Blender MCP（下）：3D 智慧仓储数字孪生进阶实战


🔗 公网在线体验 (Live Demo)：smart-warehouse-wine.vercel.app
💻 开源代码仓库 (GitHub)：github.com/Xxcool/smar…
📖 系列上篇回顾：《Antigravity + Blender MCP：打造 3D 智慧仓储数字孪生》

---

一、承上启下：从“原型跑通”到“工业生产级应用”的鸿沟

在系列上篇中，我们探索了如何利用 Google Antigravity + Blender MCP（Model Context Protocol） 工具链，无需手动编写 Python 脚本，以全自动“代码生成 + 视口视觉反馈 + 拓扑自愈”的闭环，生成了一座仅 1.86 MB 的高精轻量立体仓储厂房，并借助 Vue 3 + Vite 5 + TypeScript + Three.js 搭建起基础的 3D 渲染管线。

在上篇发布后，许多前端小伙伴在试玩了在线 Demo 后大呼过瘾。然而，当我们尝试将这个 Demo 拿到更具实战要求的工业管控场景中时，一系列尖锐且真实的**“灵魂拷问”**接踵而至：

💬 “传送带上的货物明明是五颜六色的，为什么到了 AGV 小车上就全变成千篇一律的白盒子了？而且到了终点小车也不卸货，货物怎么还在划线区域乱跑？”
💬 “看右边出口处的月台地面，线条怎么全是对角斜切的‘蜘蛛网’？货区和行驶路线混在一起，这哪像现代化自动化工厂？”
💬 “页面 UI 和 3D 模型完全不融合，KPI 指标全挤在顶部横幅条，没有工业指挥中心的科技沉浸感！”
💬 “大屏背景到底是深色好还是浅色好？为什么不能像专业软件一样支持一键切换昼夜沙盘？”

这些质疑非常专业，精准切中了许多 Web 3D 项目从“原型验证”走向“工业落地”时所面临的技术断层。

工业级数字孪生的核心，绝不仅仅是把静态模型摆在网页上，而是物理规律的严谨映射、业务动线的真实闭环、以及人机工效的高维呈现。

在本篇（下篇）中，我们将继续借助 Antigravity 的高阶 Agentic 能力与现代前端工程化方案，直面上述四大难题，打响从“原型”到“生产级管控大屏”的四大攻坚战！

---

二、攻坚战一：地面动线大清洗——Blender MCP 自动化重构工业 5S 标线

在真实的自动化智能工厂中，地面划线必须严格遵守 工业 5S 管理规范与安全通道标准：人流、物流、堆垛区、缓冲区分界分明，色彩与线型具有严格的警示含义。

1. 发现病灶：历史残留的“蜘蛛网对角斜线”

在早期迭代中，建模时遗留了 24 条未清理的零散路径（例如 Neon_Track_East_Dock3_Spur 从 (6.76, -4.5) 一路斜切至 (14.84, -8.10)），甚至死道支线直接贯穿了托盘货格。

用户一眼就发现了违和感：

“右边出口处线条是错乱的，货物区域和 AGV 行驶路线应该用不同的线条去处理，行驶的路线应该类似轨迹路线一样。”

2. Antigravity + Blender MCP 自动化大扫除

无需在 Blender GUI 界面手动框选点线面，Antigravity 直接通过 execute_blender_code 下发几何重构指令：

1. 彻底清扫全部 24 条杂乱历史斜线与多余支轨；
2. 货物存储区工业黄色标定界：
   • 采用标准工程安全琥珀黄（#f59e0b，线宽 0.06m）；
   • 严格按照正交几何，标定东侧托盘立垛区（6×4 网格）、南侧高位库区（3×3 网格）、西侧分拣周转区及 2/3 号月台装卸 Apron 箱框；
3. AGV 激光超导引导光轨：
   • 多层工业导引带：0.24m 宽度的深色微晶嵌地底带 + 0.07m 荧光青蓝超导发光中心线（#00f3ff）；
   • 1.2m 工业机器人平滑倒角：转弯节点（东北角、东南角、西南角及月台 S 弯）全部重构为符合工业 AGV 转弯半径的 1.2m 圆角；
   • 站点光圈与导流箭头：在关键装卸点布设环形停靠光圈（AGV_Waypoint_*）与行进方向动态导流箭头。

<span># Antigravity 通过 Blender MCP 自动化构建 5S 琥珀黄货区定界方框示例</span>
<span>import</span> bpy

<span>def</span> <span>create_cargo_demarcation</span>(<span>name, center_x, center_z, width, depth, color_hex=<span>"#f59e0b"</span></span>):
    mesh = bpy.data.meshes.new(name + <span>"_Mesh"</span>)
    obj = bpy.data.objects.new(name, mesh)
    bpy.context.collection.objects.link(obj)

    <span># 计算 4 个角点形成闭合标线框 (线宽 0.06m)</span>
    half_w, half_d = width / <span>2.0</span>, depth / <span>2.0</span>
    verts = [
        (center_x - half_w, <span>0.015</span>, center_z - half_d),
        (center_x + half_w, <span>0.015</span>, center_z - half_d),
        (center_x + half_w, <span>0.015</span>, center_z + half_d),
        (center_x - half_w, <span>0.015</span>, center_z + half_d),
    ]
    <span># 构建带状网格并分配安全警示琥珀黄材质...</span>

重新导出后，我们在 Three.js 顶视图中截获了修复前后的强烈对比：

---

三、攻坚战二：拒绝假仿真——AGV 真实装卸物流闭环与物料色彩镜像

这是很多 3D 仓储项目中最容易被忽视的“硬伤”：小车在轨道上机械转圈，小车上永远空空如也，或者永远顶着一个白色方块。

我们彻底重构了 AGV 运动控制器，实现了一套 全自主工业装卸物流闭环状态机（Logistics FSM）。

stateDiagram-v2
    direction LR
    [*] --> 空车接驳: 巡线至 1号月台伸缩滚筒端点
    空车接驳 --> 自动装载: 滚筒箱件滑落至举升托盘
    自动装载 --> 色彩镜像: 动态克隆物料原色(红/蓝/灰)
    色彩镜像 --> 重载巡线: 顶升载荷，沿激光光轨匀速运送
    重载巡线 --> 自动卸载: 到达指定立垛/货架仓位
    自动卸载 --> 库存增加: 触发 WMS 入库记数，箱件隐入货架
    库存增加 --> 空车回流: 降下机构，进入空载巡航回道
    空车回流 --> 空车接驳: 闭环循环作业

1. 破解“白盒子”魔咒：物料属性动态镜像算法

针对用户反馈的 “传送带上不同颜色的货物，到了 AGV 上为啥都是白色的？” 问题，我们彻底推翻了“静态白色 Mesh 占位”的简单粗暴做法。

在 Three.js 核心控制器中，每台 AGV 实例化时均持有一组可变载荷网格，并与月台传送带的入库批次动态握手：

<span>// WarehouseScene.ts 中的物料属性镜像映射实现</span>
<span>private</span> <span>handleAgvDockingLoad</span>(<span>agv: AgvItem, incomingBox: ConveyorBoxItem</span>) {
  <span>// 1. 抓取滚筒线上到达终点的真实货物材质与属性</span>
  <span>const</span> sourceMat = incomingBox.<span>mesh</span>.<span>material</span> <span>as</span> <span>THREE</span>.<span>MeshStandardMaterial</span>;
  <span>const</span> targetColor = sourceMat.<span>color</span>.<span>clone</span>();

  <span>// 2. 动态克隆材质，保持颜色与粗糙度 100% 镜像一致</span>
  <span>if</span> (agv.<span>cargoMesh</span>) {
    <span>const</span> payloadMat = <span>new</span> <span>THREE</span>.<span>MeshStandardMaterial</span>({
      <span>color</span>: targetColor,
      <span>roughness</span>: <span>0.35</span>,
      <span>metalness</span>: <span>0.1</span>,
      <span>name</span>: <span>`AgvCargoMat_<span>${agv.id}</span>`</span>
    });
    agv.<span>cargoMesh</span>.<span>material</span> = payloadMat;
    agv.<span>cargoMesh</span>.<span>visible</span> = <span>true</span>; <span>// 顶升货物显形</span>
  }

  <span>// 3. 记录物理载荷信息，驱动状态机进入重载巡线阶段</span>
  agv.<span>state</span> = <span>'LOADED_CRUISE'</span>;
  agv.<span>payloadColorHex</span> = targetColor.<span>getHexString</span>();
}

当传送带上一箱深砖红的重型备件滑入小车托盘，AGV 上的箱件立刻镜像为深砖红；若是一箱高光青蓝的冷链鲜品，装车后同样严丝合缝地保持青蓝色。

2. 自动卸载与入库记数

当 AGV 行驶至南区或东区指定的立垛仓位点时，小车微停卸货，货箱平滑隐入立垛货架，同时驱动左侧 HUD 的 “今日仓储吞吐量” 与 “库位动销周转率” 实时动态递增！

随后，AGV 自动切入空载姿态，沿回流轨道返回 1 号月台，形成了一套真实反映 WMS/WCS 业务逻辑的数字孪生闭环。

---

四、攻坚战三：全域双视觉风格引擎——赛博深空 vs 白昼展厅

在工业 3D 界面设计中，经常出现两派争议：

• 调度派：喜欢黑夜底色的高对比暗色大屏，微晶发光、科幻感强，适合在中控室暗环境下长时间监控；
• 汇报派：喜欢明亮清爽的白昼工业沙盘，灰白展台、结构清晰，适合在明亮展厅进行汇报演示。

我们不做二选一，而是直接在引擎层开发了「全域双视觉风格切换引擎 (Dual-Theme Engine)」！

核心实现：全场景材质属性与曝光管线动态联动

在 Three.js 中实现多主题切换，绝不是简单地换一个背景图，而是整个 PBR 物理材质系统、自发光通道、环境光与 ACES Filmic 曝光的深度协同：

<span>// WarehouseScene.ts 双主题平滑迁移管线</span>
<span>public</span> <span>setTheme</span>(<span>theme</span>: <span>'cyber'</span> | <span>'studio'</span>): <span>'cyber'</span> | <span>'studio'</span> {
  <span>this</span>.<span>currentTheme</span> = theme;
  <span>const</span> isCyber = theme === <span>'cyber'</span>;

  <span>// 1. 背景与环境雾深度联动</span>
  <span>const</span> bgColor = isCyber ? <span>0x020617</span> : <span>0xe2e8f0</span>;
  <span>this</span>.<span>scene</span>.<span>background</span> = <span>new</span> <span>THREE</span>.<span>Color</span>(bgColor);
  <span>if</span> (<span>this</span>.<span>scene</span>.<span>fog</span>) {
    <span>this</span>.<span>scene</span>.<span>fog</span>.<span>color</span>.<span>set</span>(bgColor);
  }

  <span>// 2. 主日光与半球环境光色温动态补偿</span>
  <span>if</span> (<span>this</span>.<span>sunLight</span> && <span>this</span>.<span>hemiLight</span>) {
    <span>this</span>.<span>sunLight</span>.<span>intensity</span> = isCyber ? <span>1.6</span> : <span>2.4</span>;
    <span>this</span>.<span>hemiLight</span>.<span>intensity</span> = isCyber ? <span>0.6</span> : <span>1.2</span>;
    <span>this</span>.<span>hemiLight</span>.<span>color</span>.<span>set</span>(isCyber ? <span>0x67e8f9</span> : <span>0xffffff</span>);
    <span>this</span>.<span>hemiLight</span>.<span>groundColor</span>.<span>set</span>(isCyber ? <span>0x0f172a</span> : <span>0x94a3b8</span>);
  }

  <span>// 3. 场景树无损遍历，动态调节 PBR 粗糙度与发光强度</span>
  <span>this</span>.<span>scene</span>.<span>traverse</span>(<span>(<span>child</span>) =></span> {
    <span>if</span> (child <span>instanceof</span> <span>THREE</span>.<span>Mesh</span> && child.<span>material</span>) {
      <span>if</span> (child.<span>name</span>.<span>includes</span>(<span>'Floor_Ground'</span>)) {
        child.<span>material</span>.<span>color</span>.<span>set</span>(isCyber ? <span>0x070d18</span> : <span>0xf1f5f9</span>);
        child.<span>material</span>.<span>roughness</span> = isCyber ? <span>0.25</span> : <span>0.85</span>; <span>// 赛博模式具备高折射镜面感</span>
      }
      <span>if</span> (child.<span>name</span>.<span>includes</span>(<span>'Laser_Line'</span>)) {
        child.<span>material</span>.<span>emissiveIntensity</span> = isCyber ? <span>1.8</span> : <span>0.6</span>; <span>// 赛博模式超导激光高亮</span>
      }
    }
  });

  <span>return</span> <span>this</span>.<span>currentTheme</span>;
}

支持在顶部导航栏随时一键无损切换，整个过程在 16ms（单帧刷新时间） 内完成，无需重新下载任何模型资产，显存纹理零抖动！

---

五、攻坚战四：全息双翼 HUD 架构与空间自适应微晶弹窗

我们推翻了旧版的扁平堆叠布局，为现代宽屏大屏量身定制了 全息双翼 HUD 监控体系：

1. 全息数字孪生初始化控制舱 (Loading HUD)

我们将原来单调的“黄绿进度条”彻底推翻，重构为具备科幻色彩的 全息初始化舱：

• 视觉语言：深空微光网格背景、四角战术激光角标（┌ ┐ └ ┘）、中央双环逆向旋转雷达；
• 三阶段动态遥测：将模型异步加载过程拆解为可感知的工业阶段（解构几何拓扑 ➔ 规划激光巡线 ➔ 装配全息 HUD）；
• 极速淡出，纯净入场：1~2 秒完成握手后毫秒级平滑淡出。并且初次进入场景 100% 保持视野纯净，彻底清除了调试期遗留的强行自动弹窗，只有在点击具体构件时才按需呼出卡片。

2. 3D 实体吸附与自适应防越界微晶弹窗

轻点场景内的任意设备（AGV、机械臂、托盘垛、冷库门、货车），即可呼出微晶质感的设备详情卡片。

核心投影与防越界算法：

1. 三维到二维投影：利用 Vector3.project(camera) 将世界坐标映射为屏幕像素坐标 (rawX, rawY)；
2. 自适应上下智能翻转：默认优先展示在目标正上方；当物体靠近屏幕顶部时（上方空间小于 45px），卡片自动智能翻转至物体下方展示；
3. 视口水平安全边界弹性吸附：卡片宽度固定 320px，通过左右边界夹逼算法，确保在任何分辨率与视口比例下，卡片 100% 完整呈现在视口内，绝对不溢出屏幕边缘；
4. 小三角箭头偏移补偿：小三角实时根据卡片钳夹偏移量反向补偿，依然死死锁定三维实际点击点；
5. Canvas 动态波形时序折线：卡片内置动态 Canvas，绘制出设备实时功率与传感波动曲线。

3. 纯 WebGL 相机 Dolly 缩放：杜绝破坏 HUD 视网膜精度

为了杜绝浏览器原生网页缩放（Pinch-to-zoom 或 Ctrl+滚轮）把网页文字和 UI 卡片一同放大模糊，我们全局拦截了手势事件，将所有缩放独占映射为 Three.js 摄像机沿视轴方向的前后 Dolly 位移：

• 全息 HUD、顶栏与微晶弹窗始终保持物理像素高保真；
• 3D 仓储场景拉近拉远顺滑细腻，操作手感媲美桌面级原生应用。

---

六、两篇复盘对比：从原型到工业生产级的全方位跨越

---

七、结语与全栈思考

回顾整个上下两篇的探索历程：

• 在上篇中，我们见证了 Google Antigravity + Blender MCP 带来的颠覆性效率：让 AI Agent 充当“手持游标卡尺的 3D 建模师”，打通了 3D 资产自动生成的最后一公里；
• 在下篇中，我们见证了前端工程化与图形学结合的深度：通过工业级 5S 地面重构、AGV 装卸状态机闭环、全域双风格渲染引擎与全息双翼 HUD，彻底打破了 Web 3D“只能做表面展示、难以承载复杂业务”的刻板印象。

在 AI Agent 时代，前端工程师不仅能写出高内聚的 Vue 3 组件，更能指挥 AI 操纵专业工业软件、重构物理拓扑、编排复杂物流算法、打造高维数字孪生大屏。

这是全栈工程师最好的时代，也是前端技术人重新定义自我边界的绝佳契机。

欢迎大家体验最新在线 Demo，给开源仓库点个 Star，并在评论区聊聊你对 Web 3D 与工业数字孪生的见解！

• 🎮 线上可玩 Demo：smart-warehouse-wine.vercel.app
• 💻 GitHub 开源仓库：github.com/Xxcool/smar…
• 📖 系列上篇回顾：《Antigravity + Blender MCP（上篇）：告别找模型！AI 自动化建模与 Three.js 极速搭桥》