blender导出gltf到three.js骨骼无效

### Blender 导出 GLTF 模型至 Three.js 骨骼动画失效解决方案 #### 1. 确认 UVMap 设置 为了确保模型能够正常工作于 three.js 中，无论是否有贴图，导出前应在 Blender 中为原模型添加 UVmap 设置[^1]。 ```python import bpy # Select the object you want to add a UV map to. obj = bpy.context.object if not obj.data.uv_layers: uv_layer = obj.data.uv_layers.new(name="UVMap") else: uv_layer = obj.data.uv_layers.active ``` #### 2. 使用合适的着色器 当处理带有贴图的 gltf/glb 文件时，在 three.js 中应采用适合的材质来展示模型。对于不受光照影响的情况，“背景”着色器可能是合适的选择之一[^2]。 ```javascript const loader = new THREE.GLTFLoader(); loader.load('model.glb', function (gltf) { const material = new THREE.MeshBasicMaterial({ map: texture }); gltf.scene.traverse(function (child) { if (child.isMesh) child.material = material; }); }); ``` #### 3. 动画播放配置 仅调用 `play()` 方法不足以启动骨骼动画；还需要创建时间计数器实例并将其传递给动画混合器对象，以便管理动画状态更新逻辑。此外，必须通过请求帧回调机制维持每秒多次重绘场景的过程，以保持流畅度[^3]。 ```javascript let clock = new THREE.Clock(); let mixer; function animate() { requestAnimationFrame(animate); let delta = clock.getDelta(); if(mixer){ mixer.update(delta); } renderer.render(scene, camera); } // After loading model... mixer = new THREE.AnimationMixer(gltf.scene); for(let i=0; i<gltf.animations.length;i++){ mixer.clipAction(gltf.animations[i]).play(); } ``` #### 4. 处理 SkinnedMesh 节点冲突 如果遇到碰撞检测失败的问题，则可能是因为 three.js 对 SkinnedMesh 类型的支持有限所致。尝试调整 blender 的导出选项或将模型转换成普通的 Mesh 形式再重新导入 three.js 可能有助于解决问题[^4]。 ```json { "exportSettings": { "use_visible": true, "draco_compression_level": 7, "images_data_storage": "COPY", "meshes_apply_modifiers": false, "nodes_export_hidden": false, "shadows": true, "animations": [" Bake Actions"], "selected": false, "yup": true, "force_sampling": true, "embed_textures": false, "extraneous_sockets": false, "only_deform_bones": true, "bone_heuristics": {"armature_source":"ARMATURE_NAME","algorithm":"BLENDER"} } } ```