首页 文章

在three.js中使用THREE.GLTFLoader导入和播放多个动画

提问于
浏览
2

在Blender中,当我将.glb文件放入glTF查看器(gltf-viewer.donmccurdy.com) everything works 时,我使用gltfExporter将动画模型(宇宙飞船)和动画相机导出为.glb,所以我知道这个问题不适用于型号/ Blender .

问题是当我尝试在我的脚本中播放动画时 . 我可以完美地制作模型动画或者我可以让相机完美地制作动画,但是当我尝试做相机和模型时,它会变得疯狂 . 我想可能是我对动画混音器缺乏了解?也许我只需要在一个文件中使用一个混音器?无论如何,这正是我所做的简要说明:

我创建了两个独立的动画混音器,一个用于飞船,另一个用于摄像机:

gltfStore.mixer = new THREE.AnimationMixer(gltf.cameras[0]);
gltfStore.mixerShip = new THREE.AnimationMixer(gltf.scene.children[2]);

我使用clipAction播放动画:

gltfStore.mixer.clipAction(gltfStore.animations[0]).play(); 
gltfStore.mixerShip.clipAction(gltfStore.animations[0]).play();

在我的循环中,我渲染动画:

gltfStore.mixer.update(clock.getDelta());
gltfStore.mixerShip.update(clock.getDelta());

他们分开工作,但他们没有 . 我注意到的一点是glTF动画对象中导入的动画数据包括gltf.animations [0]下的相机和模型的动画 . 我的意思是 gltf.animations[0] 有一个带有 6 项目的 tracks 数组,每个项目的位置,四元数和比例 . 是对的吗?

为方便起见,这里是主要的js文件:

var scene = new THREE.Scene();      
var mixer, animationClip;
var clock = new THREE.Clock();

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//LIGHTS
var light = new THREE.PointLight( 0xffffff, 1, 200 );
light.position.set( 10, -10, 0 );
scene.add( light )

//OBJECT TO STORE THE GLTF ASSETS WHEN LOADED
var gltfStore = {};

var loader = new THREE.GLTFLoader();

// LOAD GLTF ASSETS
var gltfCamera = loader.load(
    'spaceship.glb',
    function ( gltf ) {

        scene.add( gltf.scene );
        gltfStore.animations =  gltf.animations;
        gltfStore.ship = gltf.scene.children[2];
        gltfStore.cam =  gltf.cameras[0];

        gltfStore.mixer = new THREE.AnimationMixer(gltf.cameras[0]);
        gltfStore.mixerShip = new THREE.AnimationMixer(gltf.scene.children[2]);

        gltfStore.mixer.clipAction(gltfStore.animations[0]).play();
        gltfStore.mixerShip.clipAction(gltfStore.animations[0]).play();
        }
);


function animate() {
    requestAnimationFrame( animate );
    if(gltfStore.mixer && gltfStore.cam){
        //gltfStore.mixer.update(clock.getDelta());
        gltfStore.mixerShip.update(clock.getDelta());
          renderer.render(scene, gltfStore.cam);
    }      
};

animate();

感谢您的任何帮助/想法!

1 回答

  • 3

    因此,在进一步检查实例后,我找到了答案 .

    简单地说,没有必要提取并试图单独为模型和相机设置动画,所需要的只是从场景本身创建一个 AnimatioMixer

    gltfStore.mixer = new THREE.AnimationMixer(gltf.scene);
    gltfStore.mixer.clipAction(gltfStore.animations[0]).play();
    

    以上动画完美的所有元素 .

相关问题