Animation model has a single animation clip with all the animations in it. How to use it?

Questions
1

After weeks of struggling to get animation models working in ThreeJS my blanket feeling is that it’s a really bad idea for a programmer to go it alone without a talented animator. I have had a ton of frustration after having bought nearly 20 models. After all this, I only have 2 working because, thankfully, the artist configured the model in a way that allowed it to be imported directly into a ThreeJS scene.

My latest pain is a cat model I bought from SketchFab that has some really sweet animations. Unfortunately the animator did not split the animations out into separate clips. The animations array in the GLB model has only a single 60 second animation that has all the animations in it.

  • Is there a way for me to build a table that gives the AnimationMIxer object start/stop points so I can use the animations that are just one long sequence of frames now?

  • Or, is there a way for me to splice out the frames into slots in the animations array and do this in the GLB loader onLoad callback function?

Here is the cat in my world:

image

I am really depressed at this point as you can imagine.

Here is a link to the model on SketchFab:

2

Three.js can create sub-clips from a single original animation.
Open your animation file using your favorite 3D app, note the starting/ending frames for each subclips.

Then use it with something similar to this inside your gtlf loader function:

myMixer.clipAction(THREE.AnimationUtils.subclip( gltf.animations[ 0 ], 'idle', 0, 60)).setDuration( 4 ).play();

in this example we take the first animation found in the file, and create a subclip called ‘idle’ using frames 0 to 60, with a duration of 4 sec.

Once created, sub-clips behave exactly like standard clips. No further code is required.

3 Likes
3

Thanks Oxyn! I’ll give that a try.

4

@oxyn - Is there a way to give the sub-clip a name (e.g. - “attack1”) so I can play it by using its name like I can with other top-level animations? Or is it as simple as taking your code and doing something like this?


const subClips = {};
subClips['attack1'] = myMixer.clipAction(THREE.AnimationUtils.subclip( gltf.animations[ 0 ], 'idle', 0, 60)).setDuration( 4 ));
subClips['attack1'].play();

If so, is there anything I need to do to release all memory associate with the clip if at some point I decide to remove the animation model from my ThreeJS scene?

In fact, asked more broadly, does anybody have a document that shows the necessary steps for completely eliminating an animation model and all associated resources from a ThreeJS scene?

5

If you mean to purge all loaded ressource of an animated model using bones.
There is an extra step required on top of classic disposal function: The boneTexture case

Here is a complete sample to remove all the ressource from the GPU.
As far I know, animation are not stored there, they are garbage collected by browsers when not referenced anymore.

scene.remove(myRiggedObject);
myRiggedObject.traverse( function ( child ) {
if ( child.isMesh ) {
	child.geometry.dispose();
	child.skeleton.boneTexture.dispose();
	child.material.map.dispose();
	child.material.dispose();
	child = null;
}
});
1 Like
6

@Oxyn Thanks again. Any harm in just making a general cleanup function by adding an IF statement to your code as follows?:

if (child.skeleton && child.skeleton.BoneTexture)
    child.skeleton.boneTexture.dispose();

Could I then use the function on any animation model, using bones or not?

7

Sure! look good. Feel free to improve the code and remove the lines you don’t need.
These samples are very fragmented for quick testing and mixing :sweat_smile:

The orders of these dispose functions are not random tho
it’s sorted to avoid failure, like killing a reference while GPU still hold the buffer.
You not forced to remove everything either, recycling assets is sometimes interesting to reduce calls and code complexity.

For a better memory management (and to check your code work!) I suggest to use some tool/plugin to monitor ressources in your scene.