Question

我一直在尝试使用three.js在浏览器上显示动画，结果如下： avatar_jsffidle。正在显示头像，但没有动画。有谁可以帮助我吗？以下是完整的代码：

<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;

    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_erica78.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);
                    scene.add(objeto);

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

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

                    animation = new THREE.Animation(objeto, geometry.animations[0]);
                    animation.play();


            } 
        }

        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

在json文件中，数组skinIndices和skinWeights仅包含0个值。这意味着您已创建骨骼但未为其指定顶点。在Blender你也应该只看到骨头移动而不是身体。

这是一个测试，所以你可以看到threejs动画代码没有问题：

移动的骨骼在json（肩膀骨骼）中被引用为"parent":9和13。
将skinIndices数组中的某些0值替换为9和13值。
刷新页面：这些顶点的动画方式与肩膀在Blender中的方式相同。

现在您需要在Blender中阅读有关蒙皮的教程：）

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

1 个答案: