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

**URL:** <https://discourse.threejs.org/t/animation-model-has-a-single-animation-clip-with-all-the-animations-in-it-how-to-use-it/43523>\
**Category:** Questions\
**Tags:** animation\
**Created:** [October 12, 2022, 5:55am UTC](https://discourse.threejs.org/t/animation-model-has-a-single-animation-clip-with-all-the-animations-in-it-how-to-use-it/43523 "2022-10-12T05:55:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![MeJayEss](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@MeJayEss](https://discourse.threejs.org/u/MeJayEss)\
**Post date:** [October 12, 2022, 5:55am UTC](https://discourse.threejs.org/t/animation-model-has-a-single-animation-clip-with-all-the-animations-in-it-how-to-use-it/43523/1 "2022-10-12T05:55:40Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/9/09165bfdb81d1c796e2d9bb87934cd7ac9e6169f.jpeg)

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

Here is a link to the model on `SketchFab`:

https://sketchfab.com/models/93824c44bbb3472f842be580a1765c1a/embed?

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [October 12, 2022, 12:34pm UTC](https://discourse.threejs.org/t/animation-model-has-a-single-animation-clip-with-all-the-animations-in-it-how-to-use-it/43523/2 "2022-10-12T12:34:13Z")

</div>

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:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![MeJayEss](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@MeJayEss](https://discourse.threejs.org/u/MeJayEss)\
**Post date:** [October 12, 2022, 2:58pm UTC](https://discourse.threejs.org/t/animation-model-has-a-single-animation-clip-with-all-the-animations-in-it-how-to-use-it/43523/3 "2022-10-12T14:58:31Z")

</div>

Thanks Oxyn! I’ll give that a try.

---

<div class="post-metadata">

**Author:** ![MeJayEss](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@MeJayEss](https://discourse.threejs.org/u/MeJayEss)\
**Post date:** [October 13, 2022, 3:55pm UTC](https://discourse.threejs.org/t/animation-model-has-a-single-animation-clip-with-all-the-animations-in-it-how-to-use-it/43523/4 "2022-10-13T15:55:49Z")

</div>

@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?

```nohighlight

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?

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [October 14, 2022, 4:11am UTC](https://discourse.threejs.org/t/animation-model-has-a-single-animation-clip-with-all-the-animations-in-it-how-to-use-it/43523/5 "2022-10-14T04:11:44Z")

</div>

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.

```javascript
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;
}
});

```

---

<div class="post-metadata">

**Author:** ![MeJayEss](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@MeJayEss](https://discourse.threejs.org/u/MeJayEss)\
**Post date:** [October 15, 2022, 12:33am UTC](https://discourse.threejs.org/t/animation-model-has-a-single-animation-clip-with-all-the-animations-in-it-how-to-use-it/43523/6 "2022-10-15T00:33:11Z")

</div>

> [@Oxyn](#):
>
> ```javascript
> 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;
> }
> 
> ```

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

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

```

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

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [October 15, 2022, 1:17am UTC](https://discourse.threejs.org/t/animation-model-has-a-single-animation-clip-with-all-the-animations-in-it-how-to-use-it/43523/7 "2022-10-15T01:17:07Z")

</div>

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 😅

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.