企业官网建设流程全解析

前阵子接了个仓储数字孪生的可视化需求。按我过去的习惯，这事得拆成三拨人：建模师在 Blender 里搭场景，前端工程师写网页渲染，数据工程师把仓储系统的业务数据接进来，再让三方对表对齐坐标和命名。一套流程走下来，三周起步，中间还要经历无数次“这个货架到底在哪个坐标”的灵魂沟通。

这回我换了个路子，直接用Antigravity + Blender MCP这一套组合。Antigravity 负责调度 AI Agent，通过MCP 协议把 Blender 变成 Agent 的“手”，我只需要在对话框里用自然语言下达指令，Blender 里就会自动生成地面、货架、托盘、AGV，再导出成结构化 JSON，交给Three.js做 3D 网页渲染。整个过程从零到能跑通的数字孪生页面，压缩到两天。这篇文章是“上篇”，先把环境搭建、场景建模、JSON 导出、网页渲染这条主链路讲透，实时业务数据联动留到下篇。

如果你也想一个人完成 3D 智慧仓储数字孪生从建模到展示的全流程，这套流程可以直接拿去抄作业。

1. Antigravity + Blender MCP 是什么，为什么仓储数字孪生适合用它演示

1.1 两个工具各解决什么问题

先说Antigravity。它本质上是一个 AI 应用开发工作台，你可以在里面创建独立的 Agent 项目，给 Agent 配置能力、知识库和工具调用权限。它和普通 AI 聊天最大的区别在于“能动手”：通过 MCP 协议，Agent 可以调用外部软件、读写数据、执行一连串操作，而不是停留在给你打字的层面。

再说Blender MCP。MCP 的全称是 Model Context Protocol，是一套让 AI 模型与外部工具、数据源标准化对接的开放协议。Blender MCP 是这套协议在 Blender 侧的落地实现：你在 Blender 里装上对应插件，插件会启动一个 MCP 服务端，把 Blender 的建模能力包装成一个个可调用的工具，比如新建物体、设置材质、移动对象、阵列复制、导出场景。

所以这套组合的逻辑很清晰：Antigravity 里的 Agent 是“大脑”，Blender MCP 是“神经”，Blender 是“手”。我在 Antigravity 的对话窗口里输入“在 x 轴上把 3 号货架向右移动 2 米”，Agent 会把这个指令翻译成一次具体的 MCP 工具调用，Blender MCP 收到后在场景里执行移动操作，然后把执行结果返回给 Agent，Agent 再告诉我“已完成”。整个过程不需要我去记 Blender 的 Python API，也不需要手写建模脚本。

1.2 为什么拿仓储场景做演示

3D 数字孪生的可选场景很多，园区、工厂、机房都能做。我特意选了智慧仓储，原因是它太适合用来演示 MCP 驱动建模的能力了：

• 结构规整：仓库就是地面、货架、托盘、货物、AGV、叉车这几类元素，几何形态大多是立方体、圆柱体的组合，AI 生成起来不容易变形。
• 重复元素多：几十排货架、上百个托盘位，非常适合测试 Agent 的批量操作能力，让 AI 用阵列复制而不是一个个手动建模。
• 行业概念清晰：智慧仓储本身就有明确的业务含义，库位占用、库存数量、设备状态、出入库任务都可以映射到三维物体的位置或颜色上，方便后续做数据联动。

这一套架构落到实现层面，就是下面这条链路：

Antigravity Agent → MCP Server → Blender 场景对象 → JSON 导出 → Three.js 网页渲染 → 叠加仓储业务数据

这篇文章的上篇只解决箭头前五段：让 Agent 能用 MCP 操作 Blender，把仓储场景建出来，再把场景数据导出并渲染到网页端。数据联动那一步，需要分配好对象命名和坐标基准，我会在建模阶段就埋好伏笔。

2. 先把环境打通：Antigravity、Blender 与 MCP 网关的三角连接

2.1 启动 Blender 并装上 Blender MCP 插件

我用的 Blender 版本是 4.1 LTS，这个版本对插件生态的兼容性比较稳。安装完 Blender 后，打开软件，进入“编辑 - 偏好设置 - 插件”，在上方搜索框输入 MCP，看看是否已经内置了 Blender MCP；如果没有，就手动安装。手动安装的常规流程是把插件 zip 包下载到本地，然后在偏好设置里点“安装”，选择 zip 文件，勾选启用。

插件启用后，Blender 的侧边栏（按 N 键呼出）会多出一个 MCP 面板，里面能看到当前服务状态、监听端口和日志输出。Blender MCP 默认监听127.0.0.1:9876，如果你的本机端口被别的程序占了，可以在面板里改成其他端口，但要记住，Antigravity 那边的配置必须同步改。

装好插件后，我习惯先点一下面板里的“Start Server”按钮，让服务处于监听状态，然后再去 Antigravity 那边配连接。如果你用的是远程网关方案，插件这边还可以配置一个网关地址，把本地的 MCP Server 桥接到远端，这样即使本机不在同一局域网也能调用。这一步可选，本地上手可以先不碰。

2.2 在 Antigravity 里配置 MCP 服务器

进入 Antigravity 的项目空间，找到 MCP 相关配置入口。它通常支持两种方式：本地 MCP 和远程网关 MCP。

本地方式适合 Blender 和 Antigravity 跑在同一台电脑的情况，直接在配置里填：

{ "mcpServers": { "blender": { "transport": "websocket", "url": "ws://127.0.0.1:9876", "authToken": "此处填写你的访问令牌" } } }

远程方式则是把 Blender MCP 挂在官方或自建的 MCP 网关上，Antigravity 通过wss://开头的网关地址连接。平台分配的接入地址通常带一串 token 参数，复制到配置里就行。我的建议是：第一次测试尽量用本地方式，少一层网络因素，排查问题更快。等本地跑通，再切换到远程网关，让 Agent 能在任何地方操作这台机器的 Blender。

我实际踩过一个小坑：在 Antigravity 里粘贴网关地址时，wss://后面的 token 如果包含特殊字符，会被配置编辑器转义掉，导致 403 或握手失败。后来我改用 JSON 配置方式直接写原始值，不在图形界面的输入框里粘贴，问题就没了。如果官方浏览器扩展有“MCP 连接”开关，记得在扩展设置里把它启用，否则 web 端页面发起 MCP 调用时会被拦一道。

2.3 用一条指令验证连接

环境配好之后，别急着让它建整个仓库，先做一次最小验证。我在 Antigravity 的对话窗口里输入：

“请连接 Blender MCP，在 Blender 当前场景中新建一个立方体，坐标为 (0, 0, 0)，尺寸为 1 米见方。”

正常情况下，你会看到 Blender 视口里出现一个默认材质的新立方体，同时 Antigravity 的会话日志里出现工具调用记录，里面包含了工具名称、传入参数和返回值。这里有个细节：把“尺寸为 1 米见方”写明白很重要，AI 默认生成的立方体尺寸不一定是物理单位语义上的 1 米，只有当你要求它按米为单位设置 scale 时，后续的货架间距、通道宽度才真正有意义。

如果这一步失败，按下面的顺序排查：

1. Blender 的 MCP 面板是否显示 Listening，如果没有，点 Start Server。
2. 配置里的 url 和 authToken 是否和插件面板一致。
3. Antigravity 日志里有没有报连接拒绝、握手超时之类的信息。
4. 检查端口是否被占用，换端口后两边同步更新。

我遇到过最隐蔽的一次问题是，Blender 的 MCP 插件和 Antigravity 的 MCP 客户端版本相差太多，双方握手协议不兼容，日志里只显示一句“Failed to initialize session”。解决方式是把插件更新到和 Antigravity 匹配的版本，或者反过来固定 Antigravity 的版本。这类问题没有标准答案，但先看版本再看网络永远是对的。

3. 自然语言建模实操：在 Blender 里生成仓储场景骨架

3.1 给 Agent 写建模描述词，关键是命名和坐标基准

连接打通后，最让人兴奋的部分来了：用自然语言驱动建模。但如果你直接扔一句“给我建一个仓库出来”，Agent 大概率会卡住，因为这句话缺失了太多关键信息。我建议在 Antigravity 的项目知识库或 Agent 系统提示词里，固定一段建模规范，让 Agent 每次建模都遵循同一种规则。

我用的规范模板是这样的：

• 场景单位统一为米，Blender 视图单位切换到 Metric。
• 坐标基准：仓库地面中心点为原点 (0, 0, 0)，地面 Y 轴正方向为仓库入口。
• 所有生成对象必须有明确命名前缀，方便后续导出和前端绑定。
• 货架这类需要批量生成的对象，优先使用阵列复制，不要逐个手动创建。

对象命名前缀我习惯这样定：

不要小看这步。数字孪生场景后期做数据联动时，前端要靠名称找对象，比如后端推送“RACK_A01 占用率 80%”，前端就得能根据这个名称在场景里定位到对应的货架三维模型。命名规则统一，后面一切顺畅；命名混乱，后期接数据时你会想撞墙。

3.2 从地面、货架到 AGV：一步步生成

规范准备好后，我开始给 Agent 下发建模指令。一轮对话通常只做一件相对完整的子任务，不要一次塞太多。我当时的会话过程大致是这样：

第一轮：

“用 Blender MCP 新建场景，删除默认立方体。创建一个 24 米 x 30 米的地面平面，坐标 (0, 0, 0)，命名为 GROUND_MAIN。再创建 4 面墙壁，高度 8 米，厚度 0.3 米，围合成一个矩形空间。”

这轮生成后，Agent 会用add_mesh、move_object这些工具完成操作。如果它把墙壁漏了，你只需要补一句“在 x=12 和 x=-12 位置各生成一面长 30 米的墙”。

第二轮：

“在仓库内创建 4 排货架区，A 区在 x=-9、B 区在 x=-3、C 区在 x=3、D 区在 x=9，每排 10 列货架，货架尺寸 1.2 米宽、0.8 米深、5 米高，每列间距 3 米。”

我实际执行的时候，Agent 按指令生成了 40 个货架对象，但第一次生成的货架之间没有预留 AGV 通行通道，后来我补了一句：“每两排货架之间预留 3 米宽的通道，所有货架沿 Y 轴方向排列”，它才重新调整位置。这里暴露了一个共性问题：自然语言描述空间关系时，AI 经常不按人类直觉理解“间距”。所以你要么说得足够细，比如“货架中心点坐标依次为 x=-7.5、x=-4.5、x=-1.5”，要么让 Agent 在操作完后，用 MCP 的查询工具把对象坐标列表读回来，人工确认 spacing 是否符合预期。

第三轮：

“为每个货架生成 3 层搁板，每层高度 1.6 米。货架顶部下方 0.3 米处生成横向层板，层板尺寸与货架宽度一致。然后在货架区域内随机选择 20 个位置生成托盘，托盘尺寸 1 米 x 1 米 x 0.15 米，命名为 PALLET_01 到 PALLET_20。每个托盘上放 4 个货物箱子，箱子尺寸 0.4 米 x 0.4 米 x 0.4 米，命名为 BOX_ 前缀。”

生成这轮时，Blender MCP 执行时间明显变长，因为涉及的对象变多了。我在 Antigravity 里看到 Agent 的日志连续输出了很多次工具调用，中间还因为一次坐标计算错误，把托盘放到了墙壁外面。这时候你不用急，直接告诉 Agent：“检查所有托盘坐标是否在仓库地面边界内，不在的移动回来”，它通常能自己纠错。

第四轮是 AGV 和叉车，这是整个场景里最能体现数字孪生效果的动态元素：

“在通道区域生成 2 台 AGV，用立方体做车体，尺寸 1 米 x 0.8 米 x 0.5 米，四个角用圆柱体做轮子，车体命名 AGV_01、AGV_02。再生成 1 台叉车，简化建模，由底座、门架、货叉组成，命名 FORKLIFT_01。”

这类复合对象的建模，Agent 通常会拆解为多个部件，然后使用空对象（Empty）做父子级关系。如果你发现它把所有部件都平铺在场景里，没有父级关系，就要求它“把轮子作为 AGV 车体的子对象”。这关系到后期能不能让整台 AGV 在场景里整体移动。

3.3 手动微调：Blender 快捷键仍然是刚需

哪怕 Agent 能完成大部分建模工作，手动微调还是免不了。最典型的场景是材质颜色和局部比例调整。我不建议你为了证明“AI 建模很牛”就完全放弃 Blender 的操作能力，毕竟有些细节用鼠标点两下比打字快得多。

以下这些快捷键在配合 MCP 建模时依然常用：

• Shift+A：在当前 3D 光标位置添加物体。
• G：移动选中对象，配合 X/Y/Z 锁定方向。
• S：缩放选中对象。
• R：旋转选中对象。
• Alt+D：关联复制，复制出来的对象共享原始网格数据，适合做货架立柱这类重复部件。
• Ctrl+S：保存工程文件。这一步在 AI 建模场景里尤其重要，因为 Agent 执行批量操作后，场景结构可能变得混乱，你随时要能撤回。

我当时在 Agent 生成完货架后手动调整了几处：一个是货架层板的厚度，AI 给的是默认 0.1 米，我想让它看起来更轻巧，就手动改成了 0.03 米；另一个是地面材质，我直接用 Shift 键配合鼠标右键选中地面，然后在材质面板里给了它一个暗灰色，方便后期叠加高亮效果。

手动调整完成后，我在 Blender 里按 Ctrl+S 存了第一个版本，命名warehouse_v01.blend。这是整个项目最重要的存档点，之后每一次大改动我都会另存一个新版本，避免 Agent 操作出错把场景搞坏后无法回退。

4. 数据链路落地：从 Blender 导出 JSON，再到 Three.js 网页数字孪生

4.1 为什么选 JSON 而不是 glTF/FBX

建模完成只是第一步，数字孪生最终要呈现在网页上。工作流里最关键的枢纽，是把 Blender 场景数据导出成前端能直接消费的格式。

Blender 天生支持 glTF、FBX、OBJ 等格式，如果你只是想把模型展示出来，用 glTF 就够了。但我的目标不是静态展示，而是要做数据联动的数字孪生。glTF 是一种面向渲染的格式，文件里包含网格、材质、动画，但要去查自定义对象属性、快速按名称筛选物体、动态修改物体颜色，还是得再包一层结构化逻辑。

所以我选择把场景导出为JSON。JSON 的结构和 Blender 的对象属性可以一一对应，前端拿到之后不需要额外的解析库，直接就能遍历生成三维物体。更重要的是，我可以在 JSON 里塞自定义字段，比如对象类型、所属区域、货架编号，这些字段是未来对接仓储业务数据的基础。

4.2 导出干净的场景数据结构

Blender MCP 自带场景导出工具，但我更建议你直接在 Blender 的 Python Scripting 窗口跑一段脚本，因为这样你能完全控制 JSON 里输出哪些字段。下面是我实际用的脚本，做了部分精简：

import bpy import json scene_data = { "scene": "warehouse", "unit": "meter", "objects": [] } for obj in bpy.data.objects: if obj.type != 'MESH': continue # 获取对象颜色（优先取材质基础色，没有则灰色） color = [0.5, 0.5, 0.5, 1.0] if obj.active_material and obj.active_material.use_nodes: base_color = obj.active_material.node_tree.nodes.get("Principled BSDF") if base_color: color = list(base_color.inputs[0].default_value) scene_data["objects"].append({ "name": obj.name, "type": obj.type, "category": "rack" if obj.name.startswith("RACK_") else "pallet" if obj.name.startswith("PALLET_") else "box" if obj.name.startswith("BOX_") else "agv" if obj.name.startswith("AGV_") else "ground" if obj.name.startswith("GROUND_") else "misc", "position": [round(axis, 4) for axis in obj.location], "rotation": [round(axis, 4) for axis in obj.rotation_euler], "scale": [round(axis, 4) for axis in obj.scale], "dimensions": [round(axis, 4) for axis in obj.dimensions], "color": [round(channel, 4) for channel in color[:3]] }) with open("/tmp/warehouse_export.json", "w", encoding="utf-8") as f: json.dump(scene_data, f, ensure_ascii=False, indent=2) print("Exported", len(scene_data["objects"]), "objects")

这段脚本有几个关键逻辑：

• 只导出MESH类型对象，灯光、相机、辅助器不导出，前端不需要。
• 通过对象名前缀推断 category，这就是我在建模阶段强调命名规范的原因。如果没有命名前缀，你就只能看到一个长串的Cube.001，无法区分哪些是货架、哪些是托盘。
• 坐标、旋转、缩放统一保留 4 位小数，保证 JSON 不会因为超长浮点数变得巨大，同时留够精度。
• 颜色输出 RGBA 前三通道，因为 Blender 里材质基础色是 0-1 浮点数，正好和 Three.js 的setRGB对接。

导出 JSON 后，我一般会在命令行里用 Python 快速检查一下数据体量。一个 40 排货架加 20 个托盘的场景，导出后的 JSON 大概 80KB 左右，浏览器解析没有任何压力。

4.3 Three.js 搭建前端，绑定业务数据

前端我直接用 Three.js，不套重型引擎。它的上手难度很低，三五百行代码就能把一个 JSON 场景渲染出来，而且社区资料多，遇到问题很容易搜到答案。

下面是最小可运行的加载逻辑：

import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; const scene = new THREE.Scene(); scene.background = new THREE.Color(0x111122); const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(35, 25, 35); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; scene.add(new THREE.AmbientLight(0xffffff, 1.2)); const dirLight = new THREE.DirectionalLight(0xffffff, 1.5); dirLight.position.set(10, 20, 10); scene.add(dirLight); const gridHelper = new THREE.GridHelper(30, 10, 0x44aa88, 0x335577); scene.add(gridHelper); const objectMap = {}; fetch('./warehouse_export.json') .then(res => res.json()) .then(data => { data.objects.forEach(obj => { const geometry = new THREE.BoxGeometry( obj.dimensions[0], obj.dimensions[1], obj.dimensions[2] ); const material = new THREE.MeshStandardMaterial({ color: new THREE.Color(obj.color[0], obj.color[1], obj.color[2]) }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(obj.position[0], obj.position[1], obj.position[2]); mesh.rotation.set(obj.rotation[0], obj.rotation[1], obj.rotation[2]); mesh.name = obj.name; mesh.userData.category = obj.category; scene.add(mesh); objectMap[obj.name] = mesh; }); }); function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } animate();

这段代码做的事情很朴素：读 JSON、生成 BoxGeometry、按坐标放到场景里。因为它用dimensions而非 scale 生成几何体，所以 Blender 里所有对象的实际尺寸都能被准确保留。objectMap是我特意留的接口，后续业务数据推送进来时，就能直接按对象名改颜色、改位置。

跑起来之后，我在浏览器里看到了 40 排货架、20 个托盘和 AGV 的 3D 展示，配上暗色背景和轨道控制，已经有点智慧仓储大屏的味道了。但这还算不上严格意义的“数字孪生体”，因为还没有业务数据驱动。真正的数字孪生，是后端系统把“库位 A01-03 已被占用”“AGV 正在沿路径 3 行驶”等实时状态推送到前端，前端根据这些信息修改货架颜色、移动 AGV 位置。这部分我计划放在下篇专门讲，到时候会用到 WebSocket 通道，以及根据userData.category分派不同的数据映射逻辑。

5. 实测中绕不开的坑：403、Agent 执行终止、插件掉线

5.1 各报错的具体排查链路

环境搭好、链路跑通之后，不代表后续就一帆风顺。我在实际使用过程中遇到了不少问题，下面挑几个最典型的整理成表格，每个都附上我从现象到结论的排查思路。

这里我要特别展开说 403 的定位过程。第一次遇到它时，我在 Antigravity 的项目里执行工具调用，日志里只显示一行简单的 403，没有更多细节。我当时的第一反应是重新生成令牌，但更新后依然报错。后来我打开浏览器开发者工具，看了 Antigravity 前端发起的 WebSocket 握手请求，发现请求 URL 里的 token 有一截变成了%2F之类的 URL 编码，服务端解码后和原始 token 对不上，才意识到是粘贴过程中特殊字符被转义掉了。这个问题不看网络请求详情根本定位不到，所以遇到 403 不要只盯着令牌本身，要看实际发出去的请求头。

Agent 执行终止的问题也很有代表性。我遇到的那次，是让 Agent 一次性创建 40 个货架并且每个货架生成多层搁板，它在执行到第 17 个货架时，日志里出现了一个 Python 数组越界错误，然后在 Antigravity 会话里就显示“agent execution terminated due to error”。Console 面板里能看到具体的堆栈，但 Agent 并不会帮你分析，需要你自己去定位。我后来把任务拆成“先建 40 个空货架框架，再统一生成搁板”，一次生成操作的对象数量大幅减少，问题再没复现。

5.2 让整个链路稳定的几个习惯

踩完这些坑，我给自己总结了几条操作纪律，现在每次跑 Antigravity + Blender MCP 流程都会遵守：

第一，动手建模前先给 Agent 写“角色规范”。命名前缀、坐标基准、尺寸单位这些规则一定要在系统提示词或项目知识库里写死。不要指望每次都现说，AI 在长对话中很容易忘记之前约定的细节，规范越靠前，结果越稳定。

第二，大任务永远拆小。一次对话只做一层货架区，不要一次让 Agent 生成“所有物体”。因为 MCP 工具调用是原子的，一个超长命令序列中间任何一步出错，整个 Agent 执行都会被中断，前面做过的一切都不会回滚。拆小之后，即使某一步失败，损失也被控制在局部。

第三，每次操作后保存 Blender 工程。我要求 Agent 每完成一轮建模，就在 Blender 里执行一次保存文件操作（相当于调用bpy.ops.wm.save_mainfile()）。然后我再手动另存一个带版本号的副本。这样即便某个自动操作把场景改乱了，我也能立刻回到上一个稳定点。

第四，关注插件和 Antigravity 的更新节奏。“antigravity 更新出错”这类问题出现时，往往伴随着 MCP 配置的丢失或格式变化。我现在的做法是：不追最新版，等社区反馈稳定后再更新；更新前把mcpServers配置单独备份一份。尤其注意，更新后第一次连接要用最小指令重新验证，不要直接跑大场景。

第五，把 Blender 控制台当成第一诊断入口。Antigravity 的日志记录的是 Agent 的思考过程和工具调用摘要，但真正的 Python 异常和 Blender 内部的报错，只会显示在 Blender 的 Console 窗口（启动 Blender 时勾选“显示控制台”）。遇到执行中断，我第一步永远是切到 Blender 控制台看最后的几条红色报错，方向基本就清楚了。

我个人在实际操作中的体会是：Antigravity + Blender MCP 这套组合，真正降低的不是 3D 建模的难度，而是“建模到数字孪生”这条链路的协作成本。过去一个仓储可视化项目需要建模师、前端、后端围着同一份场景数据转，现在一个人用自然语言就能把 Blender 里的场景变成浏览器里的 3D 数字孪生页面。如果你正打算做一个类似的可视化项目，我建议你从一条最小链路开始：建一个立方体，导出 JSON，用 Three.js 把它显示出来。跑通这条链路后再去生成货架阵列，你会发现后面的一切都是水到渠成。