Method for extracting animations from master GLTF file and applying to numerous character meshes? Syncing separate hair/outfit/body meshes?

I would like to consider (ideally) the following workflow for animating game characters.

I intend to make numerous different character mesh variations (ie. different mesh “skins”) but all with the same underlying skeleton/bones in Blender. I would export from Blender and load to ThreeJS as gltf.

There are two things I am wondering if would be possible.


I would want the same animation options (clips) applied to all character variants. Rather than having to ensure all 10-20 models have the same animation clips inside, if they all have matching skeletons, I’m wondering if it’s possible to have just one model gltf with all the animations inside it, and extract from that to apply to the others.

ie. I see the following sample code: three.js docs

let mesh;

// Create an AnimationMixer, and get the list of AnimationClip instances
const mixer = new THREE.AnimationMixer( mesh );
const clips = mesh.animations;

// Update the mixer on each frame
function update () {
	mixer.update( deltaSeconds );

// Play a specific animation
const clip = THREE.AnimationClip.findByName( clips, 'dance' );
const action = mixer.clipAction( clip );;

// Play all animations
clips.forEach( function ( clip ) {
	mixer.clipAction( clip ).play();
} );

It looks like the clips are directly a part of the mesh. But could I say extract them from a “masterAnimationGLTF” loaded mesh file and then apply to my individual characters when needed?


const clips = masterAnimationGLTF.animations; //load clips from master file

for (let i=0 ; i< characterMeshList.length;i++){ //add to various characters
    for (let j=0; j<clips.length;j++){

Something like that would still save me from updating all 20+ character GLTF files any time I want to change a global animation for them all.

I see someone talking about something similar here but they don’t explain the method.



As a related question, what would also be a reasonable animation workflow if I want some character elements to be swappable? Like let’s say my main character meshes are made with no hair so I have 20 character meshes and 10 hair styles (ie. hair is rendered as separate GLTF from body).

In theory, I believe this can be best done by making the 20 character GLTF’s have identical skeletons to the 10 hair GLTF’s. Then if the two meshes (hair and body) are given identical position/rotation/animation states, everything will line up easily.

What do you think? Syncing the position/rotation is obviously trivial. But what about AnimationMixer? Would it be possible to use one to affect both body and hair at once? Or copy state from a body AnimationMixer to a hair AnimationMixer so they stay synced?

Thanks for any thoughts or ideas.

Yes you can have all the animations in one GLB (with a basic dummy model+skeleton) and then play those animations on your other GLB loaded characters, as long as they have the same skeleton+bone names, etc.

For clothing/attachments… for static things like swords and hats, you can just .add or .attach them to a bone.

For more items that need to be skinned, like clothes or capes, those will have to be rigged to the skeleton also and treated as you would the animated character meshes, and you would just add their SkinnedMesh to the same parent as the characters SkinnedMesh I think.

Often games use a scheme where they have the sections of the body mapped in such a way that they can turn off the rendering of torso, upper legs, lower legs, arms, so that when attaching clothing meshes, they don’t z-fight with the underlying character mesh… which can be hard to avoid purely by rigging.

This is all very fiddly to get working correctly/well… so be ready to debug things. :smiley:

1 Like