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

【问题标题】：Importing and playing multiple animations with THREE.GLTFLoader in three.js在three.js中使用THREE.GLTFLoader导入和播放多个动画
【发布时间】：2018-08-26 19:02:48
【问题描述】：

当我将 .glb 文件放入 glTF 查看器 (gltf-viewer.donmccurdy.com) 一切时，我从 Blender 中使用 gltfExporter 将动画模型（宇宙飞船）和动画相机导出为 .glb工作，所以我知道问题不在于模型/搅拌机。

问题是当我尝试在我的脚本中播放动画时。我可以让模型完美地制作动画，或者我可以让相机完美地制作动画，但是当我尝试让相机和模型都变得疯狂时。我认为这可能是我对动画混合器缺乏了解？也许我只需要为一个文件使用一个混音器？无论如何，这就是我正在做的事情：

我创建了两个独立的动画混合器，一个用于宇宙飞船，一个用于相机：

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] 有一个tracks 数组，其中包含6 项目、每个项目的位置、四元数和比例。是这样吗？

为方便起见，这里是主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();

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

【问题讨论】：

标签： javascript animation three.js blender gltf

【解决方案1】：

所以在进一步检查示例后，我找到了答案。

简单地说，不需要单独提取并尝试为模型和相机设置动画，只需从场景本身创建一个AnimatioMixer：

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

以上所有元素的动画效果都很完美。

【讨论】：