Three.js

Question

我正在尝试显示一个动画，其中化身移动她的双臂。我在 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>

Answer 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]），您会看到动画真的在播放。

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

快完成了;)

Three.js - 尝试在浏览器上显示动画

Three.js - Trying to display an animation on browser

json

animation

avatar