Blender MCP + Three.js 实战：从零搭建3D智慧仓储数字孪生

1. 从零搭建3D智慧仓储数字孪生的整体思路

1.1 为什么选Blender MCP而不是传统建模流程

做过数字孪生项目的朋友应该都有体会，最耗时的环节往往不是前端渲染，而是模型资产的准备。传统流程是：3D美术在Blender或Max里建好场景，导出FBX或GLTF，前端工程师再手动调整材质、拆分网格、优化面数。一个中等规模的仓储场景，光资产交接和格式转换就能耗掉两三天。

Blender MCP（Model Context Protocol）改变的就是这个环节。它本质上是一个让AI助手直接操控Blender的协议层——你可以用自然语言描述需求，AI通过MCP把指令翻译成Blender的Python API调用，实时在场景里创建、修改、组合物体。对于智慧仓储这种"货架+AGV+传送带+堆垛机"高度模块化的场景，这种方式的效率提升非常明显。

我这次要做的场景是一个典型的电商分拣仓：四排横梁式货架、两条主传送带、若干AGV小车、一个入库暂存区。如果用传统方式，光是货架的阵列复制和参数调整就得反复调。而通过MCP，我可以直接说"生成一排10列5层的横梁货架，立柱间距1.2米，层高0.8米"，AI就能把对应的Python脚本写出来并执行。

1.2 数字孪生的三层架构在仓储场景怎么落地

数字孪生的三层架构——物理层、数据层、应用层——在仓储场景里有非常具体的对应关系。物理层就是真实的仓库设备（货架、AGV、传感器），数据层是WMS系统和IoT设备上报的实时数据，应用层则是我们最终要交付的3D可视化界面。

这次的项目重点在应用层的搭建，但为了让孪生体"活"起来，数据层我做了简化处理：用模拟数据源代替真实WMS接口，通过WebSocket推送库存变化和AGV位置。这样做的好处是前端开发可以独立推进，不用等后端接口就绪。

注意：数字孪生项目最容易踩的坑是"重渲染轻数据"。很多团队花80%时间打磨模型精度，结果数据映射逻辑一塌糊涂，最后做出来只是个好看的3D模型，不是孪生体。建议在建模阶段就同步定义好每个物体的数据绑定字段。

1.3 技术选型的取舍逻辑

前端渲染选Three.js而不是Unity或UE，核心原因是部署轻量。仓储数字孪生通常需要在管理后台的浏览器里直接打开，Unity WebGL的包体动辄几十兆，加载体验很差。Three.js配合GLTF压缩，可以把整个场景控制在5MB以内。

Blender这边用MCP驱动，而不是手写Python脚本，是因为MCP支持迭代式修改。比如货架颜色不对，传统方式要改脚本重新跑，MCP可以直接说"把货架立柱改成深灰色，横梁保持橙色"，AI会增量修改而不是重建整个场景。

2. Blender MCP环境搭建与仓储模型生成实操

2.1 MCP服务端的安装与连接配置

Blender MCP的架构是：Blender端跑一个addon作为MCP Server，AI助手作为Client通过stdio或SSE连接。安装步骤不复杂，但有几个细节容易卡住。

首先确认Blender版本在3.6以上，我用的4.1。在Preferences的Add-ons里搜索"MCP"，如果没有需要手动安装。addon安装完成后，在3D视图的侧边栏（按N键调出）会出现MCP面板，点击"Start Server"启动服务。

# Blender MCP addon 核心启动逻辑（简化示意） import bpy from mcp.server import Server class BlenderMCPServer: def __init__(self): self.server = Server("blender-mcp") self.register_tools() def register_tools(self): # 注册可被AI调用的工具函数 self.server.tool("create_box")(self.create_box) self.server.tool("create_cylinder")(self.create_cylinder) self.server.tool("array_duplicate")(self.array_duplicate) self.server.tool("set_material")(self.set_material) def create_box(self, name, size, location): bpy.ops.mesh.primitive_cube_add(size=1, location=location) obj = bpy.context.active_object obj.name = name obj.scale = size return f"Created {name}"

连接配置里最容易出问题的是端口占用。默认端口9876如果被占用，需要在addon设置里改成其他端口，同时Client端也要同步修改。另外Windows防火墙可能会拦截本地回环连接，第一次启动时记得允许。

实操心得：建议在Blender里先手动建一个简单立方体测试连接，确认AI能操控场景后再开始正式建模。我一开始直接上复杂场景，结果连接断了都不知道是网络问题还是脚本报错。

2.2 用自然语言指令生成货架阵列

货架是仓储场景里重复度最高的物体，也是最适合用MCP批量生成的。我的指令是这样的：

"创建一个横梁式货架单元：两根立柱用0.1x0.1x2.5米的方柱，立柱间距1.2米；每层横梁用0.08x0.05x1.2米的方柱，共5层，层高0.5米；货架深度0.8米。生成后沿X轴阵列10组，间距1.3米。"

AI会把这个描述翻译成Blender Python脚本。这里有个关键点：立柱和横梁的尺寸参数需要精确，因为后续在Three.js里做碰撞检测和AGV路径规划时，这些尺寸会直接影响导航网格的生成。

# 货架生成脚本核心逻辑 import bpy def create_rack_unit(base_x, base_y): # 立柱 for i, x_offset in enumerate([-0.6, 0.6]): bpy.ops.mesh.primitive_cube_add(size=1) pillar = bpy.context.active_object pillar.name = f"Pillar_{base_x}_{i}" pillar.scale = (0.05, 0.05, 1.25) # 半尺寸 pillar.location = (base_x + x_offset, base_y, 1.25) # 横梁 for level in range(5): bpy.ops.mesh.primitive_cube_add(size=1) beam = bpy.context.active_object beam.name = f"Beam_{base_x}_{level}" beam.scale = (0.6, 0.04, 0.025) beam.location = (base_x, base_y, 0.5 + level * 0.5) # 阵列生成 for i in range(10): create_rack_unit(i * 1.3, 0)

生成后我检查了一下，发现横梁的Z轴位置需要微调——第一层横梁离地0.5米，但实际仓储货架第一层通常离地0.15米左右，方便放托盘。这种细节如果不在指令里说清楚，AI会按默认逻辑生成。

2.3 材质与UV的批量处理技巧

仓储场景的材质不需要太精细，但颜色区分很重要：货架橙色、立柱深灰、地面浅灰、AGV蓝色。在Blender里批量赋材质，MCP可以这样操作：

"选中所有名称包含Pillar的物体，赋予深灰色材质，粗糙度0.8；选中所有Beam物体，赋予橙色材质，粗糙度0.6。"

这里有个坑：Blender的材质节点在导出GLTF时，只有Principled BSDF的基础颜色、金属度、粗糙度会被保留，其他节点（如渐变、噪波）会被烘焙成贴图或者直接丢失。所以如果想让Three.js里的效果和Blender一致，材质尽量用简单的Principled BSDF。

UV方面，仓储场景大部分是规则几何体，用Blender的Smart UV Project就够了。但货架的横梁和立柱如果UV展开不合理，贴图会拉伸。我的做法是：对立柱用Cube Projection，对横梁用Cylinder Projection，然后统一缩放UV到合适密度。

注意：GLTF导出时勾选"Apply Modifiers"，否则阵列修改器不会生效。另外建议勾选"Compress"，能把贴图从PNG转成JPEG，体积能小一半以上。

3. 从Blender到Three.js的资产管线与场景搭建

3.1 GLTF导出参数的最优配置

Blender导出GLTF的选项很多，但仓储数字孪生场景只需要关注几个关键参数。格式选GLB（二进制单文件），这样贴图和模型打包在一起，前端加载时少一次请求。

导出设置里，"Include"选"Selected Objects"或者"Visible Objects"，不要选"All Objects"，否则会把场景里的灯光、摄像机也导出去。"Transform"里的+Y Up要勾选，因为Blender是Z轴向上，Three.js是Y轴向上，不转换的话模型会躺倒。

// Three.js加载GLB的标准写法 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'; const loader = new GLTFLoader(); const dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath('/draco/'); loader.setDRACOLoader(dracoLoader); loader.load('/models/warehouse.glb', (gltf) => { const model = gltf.scene; model.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; // 给每个mesh打上名称标签，方便后续数据绑定 child.userData.rackId = child.name.split('_')[1]; } }); scene.add(model); });

DRACO压缩能把模型体积再压60%左右，但会增加解码时间。对于仓储场景这种几何体为主的模型，DRACO的压缩比很高，建议开启。

3.2 场景光照与阴影的性能平衡

Three.js里的光照方案直接决定渲染性能。仓储场景面积大，如果用实时阴影，一个平行光加阴影贴图就能让帧率掉一半。我的方案是：主光用DirectionalLight但不投射阴影，环境光用HemisphereLight模拟天光，然后在货架底部和AGV下方手动放置假的阴影面片（用带透明渐变的平面）。

// 光照配置 const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1.2); scene.add(hemiLight); const dirLight = new THREE.DirectionalLight(0xffffff, 1.5); dirLight.position.set(10, 20, 10); dirLight.castShadow = false; // 关闭实时阴影 scene.add(dirLight); // 假阴影：在AGV下方放一个圆形渐变面片 const shadowGeometry = new THREE.CircleGeometry(0.5, 32); const shadowMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.3, depthWrite: false }); const fakeShadow = new THREE.Mesh(shadowGeometry, shadowMaterial); fakeShadow.rotation.x = -Math.PI / 2; fakeShadow.position.y = 0.01;

这样做的好处是帧率能稳定在60fps，而且视觉上几乎看不出差别。如果项目要求高保真，可以开启阴影但把shadow map尺寸控制在1024以内，并且只让货架投射阴影，地面接收。

3.3 地面网格与坐标系统的统一

数字孪生场景里，所有物体的位置都要和真实仓库对应。我的做法是在Blender里就以米为单位建模，地面网格用1米x1米的Grid辅助线。导出到Three.js后，场景的坐标原点对应仓库的某个角落，X轴沿货架排列方向，Z轴沿通道方向。

// 地面网格辅助（开发时可见，上线时隐藏） const gridHelper = new THREE.GridHelper(50, 50, 0x888888, 0xcccccc); gridHelper.position.y = 0; scene.add(gridHelper); // 坐标转换：真实仓库坐标 -> Three.js坐标 function warehouseToScene(realX, realZ) { // 假设真实仓库原点在场景(0,0)，1单位=1米 return { x: realX, z: realZ }; }

这里有个容易忽略的点：Blender导出的GLTF，如果场景里有多个物体，它们的原点可能不在世界原点。建议在Blender里把所有物体的原点都设置到世界原点（Object > Set Origin > Origin to 3D Cursor），这样在Three.js里操作时不会出现奇怪的偏移。

4. 数据驱动与动态交互的实现细节

4.1 用WebSocket模拟实时库存数据

数字孪生的核心是"动起来"。我写了一个简单的Node.js服务，每2秒推送一次库存变化和AGV位置：

// 模拟数据推送服务 const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); const agvPositions = [ { id: 'AGV-01', x: 5, z: 3, status: 'moving' }, { id: 'AGV-02', x: 12, z: 8, status: 'idle' } ]; wss.on('connection', (ws) => { setInterval(() => { // 模拟AGV移动 agvPositions.forEach(agv => { agv.x += (Math.random() - 0.5) * 0.5; agv.z += (Math.random() - 0.5) * 0.5; }); ws.send(JSON.stringify({ type: 'agv_update', data: agvPositions })); }, 2000); });

前端接收数据后，用Tween.js做平滑插值，避免AGV位置跳变：

import TWEEN from '@tweenjs/tween.js'; ws.onmessage = (event) => { const msg = JSON.parse(event.data); if (msg.type === 'agv_update') { msg.data.forEach(agvData => { const agvMesh = scene.getObjectByName(agvData.id); if (agvMesh) { new TWEEN.Tween(agvMesh.position) .to({ x: agvData.x, z: agvData.z }, 1800) .easing(TWEEN.Easing.Quadratic.Out) .start(); } }); } }; // 渲染循环里更新TWEEN function animate() { requestAnimationFrame(animate); TWEEN.update(); renderer.render(scene, camera); }

4.2 货位状态的颜色映射与点击交互

货架上的每个货位需要根据库存状态显示不同颜色：有货绿色、空位灰色、锁定黄色。实现方式是在Blender里把每个货位的托盘单独命名（如Pallet_01_03），导出后在Three.js里根据名称匹配数据。

// 货位状态更新 function updatePalletStatus(palletId, status) { const pallet = scene.getObjectByName(palletId); if (!pallet) return; const colors = { occupied: 0x4CAF50, empty: 0x9E9E9E, locked: 0xFFC107 }; pallet.material.color.setHex(colors[status]); } // 点击交互：用Raycaster检测点击的货位 const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); renderer.domElement.addEventListener('click', (event) => { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(palletGroup.children); if (intersects.length > 0) { const clicked = intersects[0].object; showPalletInfo(clicked.name, clicked.userData); } });

实操心得：Raycaster检测时，如果场景里物体太多，性能会下降。建议把货位托盘放在一个单独的Group里，只对这个Group做射线检测，不要对整个场景做。

4.3 AGV路径动画与避障逻辑的简化实现

真实的AGV路径规划很复杂，但数字孪生展示层面可以简化：预设几条路径点，AGV沿路径点移动，遇到障碍物（其他AGV）时暂停等待。

// AGV路径跟随 class AGV { constructor(mesh, pathPoints) { this.mesh = mesh; this.pathPoints = pathPoints; this.currentIndex = 0; this.speed = 0.05; } update() { const target = this.pathPoints[this.currentIndex]; const direction = new THREE.Vector3() .subVectors(target, this.mesh.position); if (direction.length() < 0.1) { this.currentIndex = (this.currentIndex + 1) % this.pathPoints.length; return; } direction.normalize(); this.mesh.position.add(direction.multiplyScalar(this.speed)); // 让AGV朝向移动方向 this.mesh.lookAt(target); } }

避障逻辑用简单的距离检测：如果两个AGV距离小于1米，后面的AGV速度降为0。

5. 常见问题排查与性能优化实录

5.1 Blender MCP连接失败的排查清单

MCP连接问题我遇到过好几次，整理了一个排查顺序：

最常见的是端口占用。Windows下可以用netstat -ano | findstr 9876查看，如果被占用就换成9877或9888。

5.2 Three.js场景卡顿的优化手段

仓储场景物体多，容易卡顿。我实测下来最有效的几个优化：

第一，合并静态几何体。货架的立柱和横梁如果每个都是独立Mesh，draw call会很高。用BufferGeometryUtils.mergeGeometries把同一材质的物体合并成一个Mesh。

import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'; const geometries = []; rackGroup.children.forEach(mesh => { geometries.push(mesh.geometry.clone()); }); const mergedGeometry = mergeGeometries(geometries); const mergedMesh = new THREE.Mesh(mergedGeometry, rackMaterial);

第二，用InstancedMesh渲染重复物体。AGV、托盘这类完全相同的物体，用InstancedMesh可以大幅减少draw call。

第三，限制帧率。数字孪生不需要60fps，30fps足够。用renderer.setAnimationLoop配合时间判断，每两帧渲染一次。

5.3 模型导出后材质丢失的修复方法

GLTF导出后材质变白或变黑，通常是两个原因：一是材质用了Blender专有节点，二是贴图路径不对。解决方法是在Blender里把材质简化为Principled BSDF，贴图用Image Texture节点直接连Base Color。

如果导出后颜色偏暗，检查GLTF的材质是否被设置了metalness=1。Blender默认金属度是0，但有些材质预设会改成1，导出后在Three.js里没有环境贴图就会显示为黑色。

注意：Three.js里如果用了GLTF的材质，记得设置renderer.outputColorSpace = THREE.SRGBColorSpace，否则颜色会偏灰。

5.4 数据绑定错位的调试技巧

数字孪生最常见的问题是数据绑错物体。比如AGV-01的数据绑到了AGV-02上。排查方法是：在Three.js里给每个物体加一个调试用的标签（用CSS2DRenderer），显示物体的名称和绑定的数据ID，一眼就能看出错位。

import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'; function addDebugLabel(object, text) { const div = document.createElement('div'); div.textContent = text; div.style.color = 'red'; div.style.fontSize = '12px'; const label = new CSS2DObject(div); label.position.set(0, 1, 0); object.add(label); }

上线前把调试标签隐藏即可。这个技巧帮我省了很多排查时间。

5.5 浏览器兼容性与移动端适配

Three.js在Chrome和Edge上表现最好，Firefox偶尔会有WebGL上下文丢失的问题。移动端适配主要是控制渲染分辨率：用renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))，避免在高分屏上渲染压力过大。

如果需要在移动端展示，建议把阴影全部关闭，并且把货架模型做LOD（Level of Detail），远距离时用简化模型。

这个仓储数字孪生的上半部分到这里就差不多了，模型生成、场景搭建、数据驱动的主链路已经跑通。下半部分我会重点讲怎么把AGV的实时轨迹和WMS的库存热力图叠加到场景里，以及怎么用后处理做视觉增强。踩过的坑基本都列出来了，照着这个流程走，两三天就能出一个可演示的版本。