Three.js - 试图在浏览器上显示动画答案

【问题标题】：Three.js - Trying to display an animation on browserThree.js - 试图在浏览器上显示动画
【发布时间】：2015-09-29 19:15:15
【问题描述】：

我正在尝试显示一个动画，其中化身移动她的双臂。我在 Blender (v2.75) 上创建了动画并导出到 JSON (r71)。结果：头像出现在浏览器上，但没有动画（没有手臂运动）。这是代码：jsfiddle 以下是完整代码。有人可以帮帮我吗？

<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="models/three.js"></script>

        <script>

        var camera, light, renderer, objeto, animation, helpset, clock, animacao;

        var loader;

        function init() {

            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

            scene.add( new THREE.AmbientLight( 0x666666 ) );

            light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
            light.position.set( 50, 200, 100 );
            light.position.multiplyScalar( 1.3 );

            light.castShadow = true;
            //light.shadowCameraVisible = true;

            light.shadowMapWidth = 1024;
            light.shadowMapHeight = 1024;

            var d = 300;

            light.shadowCameraLeft = -d;
            light.shadowCameraRight = d;
            light.shadowCameraTop = d;
            light.shadowCameraBottom = -d;

            light.shadowCameraFar = 1000;
            light.shadowDarkness = 0.5;

            scene.add( light );


            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );


            camera.position.z = 5;

            clock = new THREE.Clock();

            loader = new THREE.JSONLoader();  
            loader.load( 'models/SL-MD-avatar_erica95.json', addModel );

            function addModel( geometry,  materials ){


                    materials[0].skinning = true;
            //      materials[0].color = "0xb091cc";

                    var m = new THREE.MeshLambertMaterial(materials);

            //      console.log(materials[0]);
                    objeto= new THREE.SkinnedMesh( geometry, m);

                    objeto.castShadow = true;
                    objeto.receiveShadow = true;

                    helpset = new THREE.SkeletonHelper(objeto);
                    //scene.add(helpset);

            //      console.log(geometry.animations[0]);

                    animacao = objeto.geometry.animations[0];

                    var nome = objeto.geometry.animations[0]["name"];

                    console.log (nome);

                    var animation = new THREE.Animation (objeto, animacao);

                    console.log(animation);

                    animation.play();

                    console.log(animation.isPlaying);

                    scene.add(objeto);

            //      console.log(animation.data);



            } 
        }

        function render() {

            delta = 0.75 * clock.getDelta();

            scene.traverse(function(child) {
                if (child instanceof THREE.SkinnedMesh){  

                    child.rotation.y += .01;
                }
          });

            THREE.AnimationHandler.update( delta );
        }

            function animate(){
                requestAnimationFrame(animate);
                render();
                renderer.render(scene, camera);
            }

            init();
            animate(); 


        </script>
    </body>
</html>

【问题讨论】：

标签： json animation three.js avatar

【解决方案1】：

您在使用 Blender 时似乎遇到了问题。你只是错过了骨骼的运动。

查看json：

"animations": [
    {                                // first object in the array (=animations[0])
    "length": 2.36,                  // animation duration
    "hierarchy": [{                  // hierarchy : defines the keyframes for each bone
        "keys": [{                   // hierarchy[0] (first bone) : keys = keyframes
            "pos": [0, 1.067, 0],    // keys[0] at time 0 : defines pos, rot, scl
            "rot": [0, 0, 0, 1],
            "scl": [1, 1, 1],
            "time": 0
        }, {                         // keys[1] at 2.36 (=last keyframe)
            "pos": [0, 1.067, 0],
            "rot": [0, 0, 0, 1],     
            "scl": [1, 1, 1],        // ! you can see values are identical to 
            "time": 2.36             // keys[0] ! so this bone won't move
        }],
        "parent": -1                 
    }, {
        ....                         // same for all hierarchy...

这意味着动画正在播放，但没有任何动作。尝试更改任何值（例如 pos : [0,1.067,0] 为 pos:[3,5,20]），您将看到动画正在播放。

在搅拌机中，您必须将动作分配给每个关键帧。

差不多完成了;)

【讨论】：

感谢您仍然继续回答我的问题。我认为您是对的，但是我尝试使用蒙皮块创建一个简单的动画，其中只有一个骨骼移动并且只有两个关键帧（开始和结束）并且它起作用了。但我会尝试为头像示例的每个骨骼和每个关键帧创建一个动作。
没有 pblm 它让我学习 :) 无需为每个骨骼设置动画，它应该可以工作。您是否正确关注了所有 those steps ？我不经常制作动画网格，所以我会在需要时查看此页面，它总是有效。