3

我正在尝试让一个非常基本的 Collada 模型在 three.js 中制作动画，但我遇到了一些问题。这两个例子（怪物和泵）都在我的机器上工作，但是每当我替换我的模型时，它就会加载但它不会动画。

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

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

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

4

4 回答 4

0

根据我从 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();
}
于 2013-10-11T12:59:32.617 回答
0

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

于 2013-10-22T08:14:39.273 回答
0

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

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();
        } );

于 2014-12-29T08:55:33.470 回答
0

user674756 是对的，对于three.js 的Collada 加载器存在重要限制，而且看起来它们不会很快得到修复。限制的完整列表位于 https://github.com/mrdoob/three.js/issues/2963

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

于 2015-03-21T13:48:47.957 回答