Question

我正试图让一个非常基本的Collada模型在three.js中制作动画，但我遇到了一些问题。这两个示例（monster和pump）都可以在我的机器上运行，但每当我替换我的模型时，它都会加载但不会生成动画。

我从示例中删除了很多额外的代码，并尝试制作一个非常基本的脚本。这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - collada</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    </head>
    <body>
        <script src="../build/three.min.js"></script>
        <script src="js/loaders/ColladaLoader.js"></script>
        <script src="js/Detector.js"></script>

        <script>

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            var container;
            var camera, scene, renderer, objects;
            var dae, skin, animation, kfAnimation;
            var clock = new THREE.Clock();
            var loader = new THREE.ColladaLoader();

            loader.load( './obj/Test1/TestSKINNED_Animation01.dae', function ( collada ) {

                dae = collada.scene;
                skin = collada.skins[ 0 ];
                animation = collada.animations[0];

                dae.scale.x = dae.scale.y = dae.scale.z = 1;

                init();
                animate();
            } );

            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                scene = new THREE.Scene();

                // Add the camera
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.set( 10, 2, 0 );
                camera.lookAt( scene.position );

                // Add the Collada
                scene.add( dae );

                var animHandler = THREE.AnimationHandler;
                animHandler.add( animation );

                kfAnimation = new THREE.KeyFrameAnimation( animation.node, animation.name );
                kfAnimation.timeScale = 1;
                kfAnimation.play( true, 0 );

                // Add the light
                var directionalLight = new THREE.DirectionalLight( 0xeeeeee );
                directionalLight.position.set(0.5, 0.5, 0.5);
                scene.add( directionalLight );

                renderer = new THREE.WebGLRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );

                container.appendChild( renderer.domElement );
            }

            function animate() {

                var delta = clock.getDelta();
                kfAnimation.update(delta);
                render();
                requestAnimationFrame( animate );
            }

            function render() {

                renderer.render( scene, camera );
            }

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

它加载模型但不动画。这可能是代码或模型的问题吗？感谢。

Answer 1

根据我从kfAnimations的理解，它们适用于JSON文件，您正在使用DAE文件，因此您只需使用skin.influences动画模型的方式：

function animate() {
    var delta = clock.getDelta();
    if ( t > 1 ) t = 0;
        if ( skin ) {
            for ( var i = 0; i < skin.morphTargetInfluences.length; i++ ) {
                skin.morphTargetInfluences[ i ] = 0;
            }
            skin.morphTargetInfluences[ Math.floor( t * 30 ) ] = 1;
            t += delta;
         }  
    requestAnimationFrame(animate);
    render();
}

Answer 2

我也遇到了同样的问题，但通过仔细比较我的collada文件和pump.dae示例，我可以推断出THREE.ColladaLoader无法加载使用LINEAR插值的动画。 pump.dae样本实际上使用BEZIER插值。当使用我的collada文件时，collada.animations属性实际上返回一个空向量，就好像没有找到动画一样，而将它与pump.dae示例一起使用，可以获得文件中动画节点的确切数量。

Answer 3

你需要在你的负载中添加遍历函数来渲染动画

loader.load( './obj/Test1/TestSKINNED_Animation01.dae', function ( collada ) {

            dae = collada.scene;
            skin = collada.skins[ 0 ];
            animation = collada.animations[0];

            dae.scale.x = dae.scale.y = dae.scale.z = 1;

		dae.traverse( function ( child ) {
			if ( child instanceof THREE.SkinnedMesh ) {
				var animation = new THREE.Animation( child, child.geometry.animation  );
				animation.play();
			}
		});

            init();
            animate();
        } );

Answer 4

user674756是对的，对于three.js的Collada加载器有一些重要的限制，看起来他们很快就会得到修复。完整的限制列表如下： https://github.com/mrdoob/three.js/issues/2963

但是，有一个工具试图加载.dae文件，简化它并将其转换为JSON，这应该证明更具有可塑性。你可以在这里使用它。 http://rmx.github.io/collada-converter/preview/examples/convert.html 还有预览，因此您可以检查动画是否通过。

基本的three.js collada皮肤动画

4 个答案: