Three.js

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 中，您还应该只看到骨骼在移动，而不是 body。

这里测试一下，threejs动画代码没有问题：

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

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

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

Three.js - Animation not being displayed on browser

animation

json

avatar