Question

我正在尝试从网格到不同的网格创建相同的骨架动画。所以我删除了第一个网格（mesh1），保留了骨架（已经有骨架动画），然后将第二个网格（mesh2）导入为.obj文件（将此.js文件转换为一个.obj文件，使用three.js editor）。我缩放，旋转并改变第二个网格的位置，使其适合骨架。然后，我完成了装配过程（我选择了网格+移位+选择了电枢，然后点击了＆＃34; ctrl + P＆＃34;来创建父母）。它起作用，第二个网格根据第一个网格的骨架动画进行动画处理。然而，当我尝试将此网格导出为three.js作为骨架动画时（我选择了姿势模式，因为当我选择休息模式时，它会给我错误），网格以杂乱的方式显示而不是正常的形状。我怎样才能解决这个问题？我使用的javascript代码如下所示：

<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 scene, camera, light, renderer, objeto, animation1;

                var loader, model;

                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;


                loader = new THREE.JSONLoader();  
                loader.load( 'models/marine_anims_morph.json', addModel );


                function addModel( geometry,  materials ){

                    materials[0].skinning = true;

                    objeto = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial(materials));

                    objeto.position.y = -1.5;

                    objeto.rotation.y = 3.14;
                    objeto.position.x = 0.5;

                    objeto.scale.x = 0.02;
                    objeto.scale.y = 0.02;
                    objeto.scale.z = 0.02;


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

                    scene.add(objeto);
                }

                var prevTime = Date.now();

                function render () {
                    if ( animation1 ) {
                        var time = Date.now();
                        animation1.update((time - prevTime)/10);
                        prevTime = time;
                    } 
                }


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

                animate();

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

如何为不同的网格创建相同的骨架动画？

0 个答案: