logo标签列表

基本的three.js collada骨骼动画

three.jscollada
3

我正在尝试在three.js中使一个非常基本的Collada模型动画化，但是我遇到了一些问题。这两个示例（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>

它加载了模型，但没有进行动画。这可能是代码还是模型的问题？谢谢。
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();
}
0
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();
        } );

0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接