当材质蒙皮为真时,Three.js蒙皮动画网格消失

时间:2013-09-26 02:56:33

标签: javascript three.js

我从Blender导出了一个动画模型,似乎没有任何问题实例化。我能够创建THREE.Animation和模型,但我发现没有动画。我意识到我需要在每个材质上设置skinning true,但是当我这样做时,整个网格都会丢失。

下面是我(快速而混乱)的代码试图让一切工作。

function loadModel() {
        var loader = new THREE.JSONLoader();
        loader.load('assets/models/Robot.js', function(geom, mat) {
            _mesh = new THREE.Object3D();
            _scene.add(_mesh);

            geom.computeBoundingBox();

            ensureLoop(geom.animation);
            THREE.AnimationHandler.add(geom.animation);

            for (var i = 0; i < mat.length; i++) {
                var m = mat[i];
                //m.skinning = true; <-- Uncommenting this makes the model disappear
                //m.morphTargets = true; <-- This causes all sorts of WebGL warnings

                m.wrapAround = true;
            }

            var mesh = new THREE.SkinnedMesh(geom, new THREE.MeshFaceMaterial(mat));
            mesh.scale.set(400, 400, 400);
            mesh.position.set(0, -200, 0);
            mesh.rotation.set(Utils.toRadians(-90), 0, 0);
            _mesh.add(mesh);
            _robot = mesh;
            Render.startRender(loop);

            var animation = new THREE.Animation(mesh, geom.animation.name);
            animation.JITCompile = false;
            animation.interpolationType = THREE.AnimationHandler.LINEAR;
            animation.play();

        });
    }

我相信我正在循环中正确更新AnimationHandler

function loop() {
    _mesh.rotation.y += 0.01;

    var delta = 0.75 * _clock.getDelta();
    THREE.AnimationHandler.update(delta);
} 

3 个答案:

答案 0 :(得分:0)

在导出的JSON文件的元数据部分中, morphTargets 骨骼的数量都大于0?

我认为你跟着这个例子:

http://threejs.org/examples/#webgl_animation_skinning_morph

其中动画模型使用变形目标和骨骼动画(参见维基百科的理论概念)。

如果动画模型仅使用Skeletal Animation,例如本例http://alteredqualia.com/three/examples/webgl_animation_skinning_tf2.html

您必须实例化 THREE.SkinnedMesh 对象,然后仅将 m.skinning 属性设置为 true

答案 1 :(得分:0)

我刚才遇到了同样的问题。对我来说有用的是用应用的比例重新制作模型,并为LocRotScale设置关键帧,而不仅仅是位置。

答案 2 :(得分:0)

最近,在将混合器蒙皮动画导出到json时,我遇到了类似的网格消失问题。事实证明,我使用的网格有双顶点(一个顶点隐藏另一个顶点)。一切看起来都很好在混合器中创建顶点组和动画时,但是当我通过three.js导入网格时,它会在动画开始时立即消失。换句话说,如果从顶点组中省略了网格中的1个顶点,则会遇到这种消失的行为。为了防止这个问题,我现在使用&#34;删除双打&#34;在将其导出到json之前,从blender中运行以验证网格完整性。你可能遇到了同样的问题,并重做你的网格工作修复它...不管怎样,这个问题已经很老了,但是这个话题今天仍然有效,所以我希望这些新信息可以帮助那些人... < / p>

和平INF1