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

【问题标题】：Three.js - Animation not being displayed on browserThree.js - 动画未显示在浏览器上
【发布时间】：2015-09-28 02:03:32
【问题描述】：

我一直在尝试使用 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>

【问题讨论】：

您的小提琴使用的是 r54。 Updated。控制台告诉json有问题，看一下。我无法缩进并逐行观看。你编辑了吗？
我已经用更新的 jsffidle 链接编辑了我的原始帖子。我把 JSON 文件缩进了（在外部资源中，还有另一个同名的链接）。那么你能不能打开它，复制粘贴到 .json 文件中，然后上传到服务器，就像你对 three.js 文件所做的那样？

标签： json animation three.js avatar

【解决方案1】：

在 json 文件中，数组 skinIndices 和 skinWeights 只包含 0 个值。这意味着您已经创建了骨骼，但没有为它们分配顶点。在 Blender 中，您还应该只看到骨骼移动而不是身体。

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

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

现在您需要阅读有关在 Blender 中进行蒙皮的教程 :)

【讨论】：

请为我从昨天开始花在它上面的 4 个小时投票 ^^
非常感谢，对此感到抱歉。
no pblm 我真的很感兴趣，因为没有更多错误并且 json 具有所有需要的参数。