blender导出gld格式导入three.js后模型和骨骼变形

Question

blender导出gld格式导入three.js后模型变形了，请问怎么设置能让模型和骨骼不变形？

Answer 1

引自免费微信小程序：皆我百晓生

当遇到Blender导出GLTF格式到Three.js后模型和骨骼发生变形的问题，这通常与导出设置、坐标系统不匹配、单位系统差异或Three.js加载时的配置有关。为了解决这一问题，可以遵循以下步骤进行排查和调整：

1. 检查Blender中的单位设置

• 确保Blender的单位设置（Scene > Unit Settings）与Three.js所期望的单位一致，通常是米制。

2. 导出GLTF设置

• 在Blender中导出GLTF文件时，选择GLTF 2.0作为格式。
• 在导出选项中，确保勾选Export animations和Y-Up Axis（如果Three.js使用的是Y-up坐标系）。
• 如果模型在Three.js中看起来比预期的大或小，尝试勾选或取消勾选Apply Scale。

3. Three.js加载配置

// 加载GLTF模型
const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.gltf', function(gltf) {
    const model = gltf.scene;
    scene.add(model);

    // 调整模型大小，如果发现模型尺寸不对
    model.scale.set(1, 1, 1); // 默认是1，根据实际情况调整

    // 调整模型位置，如果模型没有正确放置
    model.position.set(0, 0, 0); // 根据实际情况调整

    // 如果模型旋转不对，可以这样调整
    model.rotation.set(0, 0, 0); // 根据实际情况调整

    // 如果模型骨骼动画出现问题，检查动画混合器
    const mixer = new THREE.AnimationMixer(model);
    for (const clip of gltf.animations) {
        const action = mixer.clipAction(clip);
        action.play();
    }
});

4. 检查Three.js场景设置

• 确认Three.js的场景是否使用了正确的坐标系统。如果Blender是Y-up，Three.js也应使用Y-up。

5. 骨骼动画问题

• 确保在Three.js中正确设置了动画混合器THREE.AnimationMixer并播放了动画。
• 检查动画数据是否正确加载并应用到了模型上。

6. 调试与验证

• 使用Three.js的OrbitControls库可以帮助观察和验证模型在不同角度下的表现。
• 利用浏览器开发者工具的3D模型查看器功能（例如Chrome的Inspect Element中的Model Viewer）来检查模型的结构和动画。

通过上述步骤，你应该能够定位并解决Blender导出GLTF到Three.js后模型和骨骼变形的问题。如果问题仍然存在，可能需要更深入地检查模型的具体细节或Three.js的渲染逻辑。