I am working on an Angular project, and have searched on web but nothing I have found helps me determine a path forward. I have received 3 GLTF files for the face of a model smiling, crying, laughing and another set of GLTF files for the same model running, jumping and walking. My goal is I want to be able to combine the animations such that I can have (Running + smiling OR Running + laughing OR walking + crying OR any of the combinations.
How do I combine two gltf animations in threejs? I read I can use the AnimationMixer, but can't figure out how this would work on the same model? Do I have to export the base model separately from the skeleton/animations and then try to combine them in my threejs app? Or is there something I am missing?
The AnimationMixer class takes a root object as its argument. If (and only if) the skeleton/animations of your various glTF models are compatible, then you can load the character from any one of those glTF files, construct an AnimationMixer targeting it, and use the animations from the other files on that mixer.
const mixer = new THREE.AnimationMixer( gltf1.scene );
const run = mixer.clipAction( gltf2.animations[ 0 ] );
const laugh = mixer.clipAction( gltf3.animations[ 0 ] );
const smile = mixer.clipAction( gltf4.animations[ 0 ] );
// ...
run.play();
See THREE.AnimationMixer documentation for more details.
If you're not sure that the animations and armatures of these models are compatible, it's often easiest to combine them in software like Blender, then export a single glTF file containing all of the animations and a single copy of the character.