企业官网建设流程全解析

1. 从零拆解：为什么选 Blender MCP 做智慧仓储数字孪生

1.1 这个项目到底在做什么

先把话说清楚：这个项目的核心目标，是在浏览器里跑起来一套3D 智慧仓储数字孪生系统，用 Vue 3 做前端框架、Three.js 做 WebGL 渲染层，而三维场景里的货架、AGV 小车、堆垛机、传送带这些模型资产，全部在 Blender 里建好，再通过Blender MCP这条通道，把 Blender 和 AI 辅助工具（比如 Antigravity 这类支持 MCP 协议的智能体客户端）打通，让“建模—导出—前端加载—数据驱动”这条链路尽可能自动化。

说白了，就是解决一个很现实的痛点：传统数字孪生项目里，三维美术和前端开发是两拨人，模型改一版，前端就得重新导一次 glTF、重新对一次坐标、重新绑一次动画名，来回扯皮。Blender MCP 的价值就在于，它把 Blender 变成了一个可以被程序化调用的“建模服务端”，AI 或脚本可以通过 MCP 协议直接指挥 Blender 干活——建几何体、改材质、批量导出、甚至按命名规范整理场景层级。

适合谁看？三类人：一是做前端数字孪生网站的 Three.js 开发者，想搞清楚模型资产怎么规范化；二是做数字孪生园区/仓储方向的工程师，需要一套可复现的资产管线；三是刚接触 MCP 协议、想拿 Blender 练手的技术爱好者。哪怕你 Three.js 只会画个正方体、Blender 只会删默认立方体，跟着这条链路走一遍也能落地。

1.2 为什么是 Blender + MCP，而不是 Unity 或纯代码建模

很多人第一反应是：数字孪生不是 Unity 的强项吗？确实，Unity 数字孪生方案成熟，但它的部署链路重——打包成 WebGL 后体积大、首屏慢，而且和 Vue 3 这种现代前端框架的融合并不顺滑。而 Three.js 直接跑在浏览器里，配合 Vue 3 的响应式系统，做前端数字孪生网站的数据绑定天然合适。

那为什么不用 Three.js 纯代码建模？因为仓储场景里的货架、输送线、异形设备，几何复杂度远超“three.js 正方体”这种级别。纯代码堆 BoxGeometry 和 ExtrudeGeometry，维护成本高到离谱，改一个货架层数要动几十行代码。Blender 的可视化建模 + 参数化修改能力，在这个场景下是碾压性的。

Blender MCP 则是把这两者粘起来的关键。MCP（Model Context Protocol）本质是一套标准化的“工具调用协议”，Blender 端跑一个 MCP Server，把 Blender 的 Python API 暴露成一个个可调用工具；客户端（Antigravity 这类）通过协议发指令，Blender 执行完把结果回传。这样一来，AI 就能“看着”场景状态做决策，而不是盲写 Python 脚本。

提示：MCP 不是 Blender 独有的，它是通用协议。理解这一点很重要，意味着你后面可以把同一套思路迁移到别的工具链上。

1.3 整体架构分层，先想清楚再动手

在动手之前，我习惯先把架构画清楚（脑子里画，不是让你上 mermaid）。这套系统分四层：

这里有个容易被忽略的点：three.js 共享 序列化。数字孪生场景里往往有几十上百个相同货架，如果每个都独立加载一份几何数据，显存直接爆炸。正确做法是用InstancedMesh或者共享 geometry/material，序列化时只存一份。这个决策必须在资产层就定好——Blender 里相同货架要用 linked duplicate（关联复制），而不是普通复制，否则导出的 glTF 里就是 N 份独立网格。

2. 环境准备：Blender MCP 与前端工程搭建

2.1 Blender 侧：MCP Server 的安装与验证

Blender 端要做的第一件事，是让 Blender 具备被外部调用的能力。核心是安装blender-mcp这个插件（addon），它会在 Blender 内部起一个本地服务，监听 MCP 客户端的指令。

操作步骤我按实际踩过的顺序写：

1. 确认 Blender 版本在 3.6 以上（4.x 更稳），Python 环境是 Blender 自带的，不要用系统 Python 去装。
2. 下载blender-mcp的 addon 包，在 Blender 的Edit > Preferences > Add-ons > Install里选中 zip 安装。
3. 安装后在插件列表里勾选启用，侧边栏（按 N 键）会出现 MCP 面板。
4. 在面板里点 “Start MCP Server”，默认监听本地端口，看到日志输出 “server started” 就算成功。

这里有个坑：Antigravity 更新出错或者连接不上，八成是端口被占或者防火墙拦了。先在终端用curl或telnet测一下端口通不通，别急着怀疑插件。

注意：Blender MCP Server 只监听本机，不要改成对外地址，安全第一。

2.2 客户端侧：Antigravity 配置 MCP 连接

Antigravity 这类客户端配置 MCP 的通用逻辑是：在配置文件里声明一个 MCP Server，指定启动命令或连接地址。以本地已运行的 Blender Server 为例，配置项大致长这样：

{ "mcpServers": { "blender": { "command": "npx", "args": ["-y", "blender-mcp"], "env": { "BLENDER_HOST": "127.0.0.1", "BLENDER_PORT": "9876" } } } }

配置完重启客户端，如果能看到 blender 相关的工具列表（比如create_object、export_gltf这类），说明握手成功。如果报antigravity 403或者agent execution terminated due to error，先检查两件事：一是 Blender 那边 Server 是不是真的在跑，二是客户端版本和 MCP 协议版本是否匹配。我遇到过客户端升级后协议不兼容，回退一个版本就好了。

关于antigravity google 怎么订阅、please verify your account这类账号问题，属于客户端自身的账号体系，和 Blender MCP 技术链路无关，这里不展开，你按官方引导走即可。

2.3 前端工程：Vue 3 + Three.js + TypeScript 初始化

前端我用 Vite 起，命令很标准：

npm create vite@latest warehouse-digital-twin -- --template vue-ts cd warehouse-digital-twin npm install three @types/three

为什么用 TypeScript？因为数字孪生里模型节点、传感器数据、动画状态都是结构化对象，类型系统能帮你在编译期就发现“货架 ID 对不上”这类低级错误。Three.js 的@types/three现在质量很高，别省这一步。

目录结构我建议这样分：

src/ three/ # Three.js 核心：场景、相机、渲染器 models/ # glTF 加载与缓存 components/ # Vue 组件 stores/ # Pinia 状态 types/ # TS 类型定义

把 Three.js 逻辑和 Vue 组件解耦，是这类项目能不能长期维护的分水岭。我见过太多人把new THREE.Scene()直接写在onMounted里，后期加个功能就乱成一锅粥。

3. 核心实操：从 Blender 建模到 Three.js 加载

3.1 用 MCP 指令驱动 Blender 批量建模

这一步是整个项目最有意思的地方。传统做法是你手动在 Blender 里拖拖拽拽，现在可以借助 MCP 让 AI 帮你生成基础结构。比如让 AI 通过 MCP 调用 Blender 的 Python API，批量创建货架：

import bpy def create_rack(name, rows, cols, spacing): for r in range(rows): for c in range(cols): bpy.ops.mesh.primitive_cube_add( size=1, location=(c * spacing, 0, r * spacing) ) obj = bpy.context.active_object obj.name = f"{name}_R{r}_C{c}" obj.scale = (0.5, 0.5, 0.05)

这段逻辑通过 MCP 工具暴露出去后，AI 只要说“建一个 5 层 10 列的货架”，Blender 就自动生成 50 个立方体。但注意，这只是原型，真实货架需要横梁、立柱、层板，几何要精细得多。MCP 在这里的价值是快速搭出“占位结构”，确认布局和坐标，再人工精修。

命名规范必须在这一步定死。我用的规则是{类型}_{区域}_{行列}，比如Rack_A_03_07。为什么？因为前端要根据名字反查节点，名字乱了后面全是坑。

3.2 材质、UV 与导出前的规范化检查

模型建完，导出前有几件事必须做，顺序不能乱：

1. 应用变换：Ctrl+A应用缩放和旋转。Blender 里缩放是 2 的物体，导出后 Three.js 里 scale 还是 2，容易出诡异问题。
2. 合并同材质：相同材质的物体尽量合并，减少 draw call。
3. UV 展开：需要贴图的物体必须展 UV，仓储场景里地面、墙面、货架贴图都靠它。
4. 设置原点：每个物体的原点放在几何中心或底部，方便前端做旋转和定位。

导出格式选glTF 2.0（.glb），勾选 Draco 压缩。Draco 能把模型体积压到原来的 1/5 甚至更小，代价是前端加载时要引入 decoder。对于数字孪生园区这种大场景，Draco 几乎是必选项。

提示：导出时勾选 “+Y Up”，因为 glTF 规范是 Y 轴向上，而 Blender 是 Z 轴向上，不勾选会导致模型躺倒。

3.3 Three.js 加载 glTF 与场景初始化

前端加载这块，核心代码结构如下：

import * as THREE from 'three' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader' const dracoLoader = new DRACOLoader() dracoLoader.setDecoderPath('/draco/') const gltfLoader = new GLTFLoader() gltfLoader.setDRACOLoader(dracoLoader) gltfLoader.load('/models/warehouse.glb', (gltf) => { const model = gltf.scene model.traverse((child) => { if (child.isMesh) { child.castShadow = true child.receiveShadow = true } }) scene.add(model) })

这里的关键是traverse遍历，把每个 Mesh 的阴影属性打开。仓储场景没有阴影会非常“飘”，没有空间感。

相机我用透视相机，位置放在场景斜上方 45 度，配合OrbitControls让用户能自由旋转。如果你要做three.js 正方体摄像机效果那种正交视角的“上帝视角”，把PerspectiveCamera换成OrthographicCamera即可，仓储俯视图用正交相机更直观。

3.4 数据驱动：让货架“活”起来

数字孪生的“孪生”二字，体现在数据驱动上。静态模型谁都会摆，关键是让货架状态随真实数据变化。做法是给每个货架节点绑定一个业务 ID，前端拿到后端推送的库存数据后，动态改材质颜色：

function updateRackStatus(rackId: string, occupancy: number) { const rack = scene.getObjectByName(rackId) if (!rack) return const color = occupancy > 0.8 ? new THREE.Color(0xff4444) : new THREE.Color(0x44ff44) rack.traverse((child) => { if (child.isMesh && child.material) { (child.material as THREE.MeshStandardMaterial).color.copy(color) } }) }

这段逻辑配合 Vue 3 的响应式，后端数据一变，watch触发updateRackStatus，画面立刻更新。这就是前端数字孪生网站的核心闭环。

4. 常见问题与排查技巧实录

4.1 连接与工具调用类问题

我踩过最深的一个坑：Blender 里场景有几千个物体时，MCP 调用export_gltf会超时。解决办法是先在 Blender 里把物体合并成几个大组，再导出。别指望一次性导出上万个独立网格。

4.2 渲染性能类问题

谷歌网页有 three.js 就卡卡的——这个热搜词太真实了。原因通常是三个：draw call 太多、几何面数太高、阴影贴图太大。优化手段按性价比排序：

1. 用InstancedMesh处理重复货架，draw call 从几百降到个位数。
2. 开启 Draco 压缩，减少传输体积。
3. 阴影贴图从 4096 降到 2048，肉眼几乎无差别。
4. 远处物体用 LOD（细节层次），近处精细远处简化。

4.3 资产管线类问题

模型改了前端不生效？先确认三件事：glTF 是否重新导出、文件名是否一致、浏览器缓存是否清了。我习惯在开发环境给模型 URL 加时间戳?t=${Date.now()}，彻底避开缓存问题。

还有three.js 共享 序列化的坑：如果你在 Blender 里用了关联复制，导出后 Three.js 里多个 Mesh 会共享同一个 geometry，这时你改一个的 geometry 属性，所有都会变。要独立修改就得geometry.clone()，但会吃显存。这个权衡要在建模阶段就想清楚。

5. 我个人在实际操作中的几点体会

这套链路我前后搭了三遍，第一遍纯手动，第二遍半自动，第三遍才把 MCP 真正用顺。最大的体会是：MCP 不是让你偷懒的，是让你把重复劳动标准化的。它最擅长的是批量建结构、批量改命名、批量导出，而不是替你设计一个漂亮的货架。美术判断力还是得靠人。

另外，别一上来就追求全自动。先把 Blender 到 Three.js 的手动链路跑通，确认模型、坐标、材质、动画都没问题，再引入 MCP 做自动化。顺序反了，出问题你都不知道是模型错了还是协议错了。

最后分享一个小技巧：在 Blender 里给每个物体加一个自定义属性（Custom Properties），写上业务 ID，导出 glTF 时这些属性会保留在extras字段里。前端加载后直接读child.userData就能拿到业务 ID，比靠名字字符串匹配靠谱得多。这个细节，常规文档里基本不会写，但实际项目里能省你大量对账时间。