json - Blender 导出的 JSON 模型在 THREE.js 中显示错误的动画

Question

我在 Blender 中有一个基本的行走动画，我正在尝试将其导出到 THREE.js。在 Blender 播放中看起来不错:

现在，使用 THREE.js 导出器导出后，它在浏览器上看起来像这样:

几何结构被破坏，虽然不是所有 body 部位都被破坏，但肯定有一些问题。我不知道现在该怎么办，我尝试在选中/取消选中多个选项的情况下进行导出，但没有成功。

我还阅读了这篇文章中的解释，我想我遵循了所有必需的步骤，但仍然得到了这个奇怪的动画:

http://unboring.net/workflows/animation.html#preview

https://github.com/mrdoob/three.js/pull/8412#issuecomment-210675561

https://github.com/mrdoob/three.js/issues/6050

我当前用于加载 JSON 模型/动画的代码如下:

        var loader = new THREE.JSONLoader();
        var action = {}, mixer;

        loader.load(path + '/dino.json', function (geometry, materials) {
            materials.forEach(function (material) {
                material.skinning = true;
            });

            character = new THREE.SkinnedMesh(
              geometry,
              new THREE.MeshFaceMaterial(materials)
            );

            scene.add(character);

            /* ANIMATION */
            mixer = new THREE.AnimationMixer(character);                
            action.walk = mixer.clipAction(geometry.animations[ 3 ]);               
            action.walk.setEffectiveWeight(1);
            action.walk.enabled = true;

            /* Update/render functions */
            onUpdateFcts.push(function(delta, now){
                mixer.update(delta);
            });

            action.walk.play();
        });

我正在使用 Blender 2.78c 和 THREE.js r84，以及此版本中包含的 Blender 导出工具。

Answer 1

我发现了一些关于类似动画问题的有趣链接:

Model with bones animation (blender export) animating incorrectly in three.js

http://dev.mothteeth.com/2012/10/threejs-blender-exporting-skeletal-animations/

Blender exports a three.js animation - bones rotate strangely

阅读所有这些建议后，我按照以下工作流程成功导出了动画网格，没有视觉伪影:

1. 通过网格周围的骨骼创建骨架骨骼。完成后并在对象模式下，首先选择网格，然后选择骨架，按 CTRL+P > 使用自动权重。这会在网格上生成一个骨架修改器。根据我的阅读，导出前不需要删除骨架修改器。
2. 您必须有一个像休息位置一样的默认姿势。这必须是在 Blender 上选择的。此外，必须在该默认姿势中选择播放帧 0。
3. 我在每个姿势的开始和结束时为所有涉及的骨骼创建了关键帧，这似乎很重要。
4. 您必须取消选择所有内容，只选择网格，而不是骨架。这必须在对象模式下完成。
5. 我的导出设置:

注意:我必须说，这与我所遵循的工作流程相同，但运气不佳。这次的不同之处在于，我首先删除了每个顶点组，还有骨架修改器(不是骨架本身)，并重新创建了第一个步骤中的所有步骤。现在，一旦导出，动画网格就足够好了!