If you want to split the animations of a model into separate parts, you can access the model.animations
property that is available when loading the model using loaders like GLTFLoader
, FBXLoader
, and others.
new GLTFLoader().load('foo.gltf', (model) => {
console.log(model.animations)
})
The model.animations
array consists of AnimationClip
objects, each containing a list of tracks. Depending on how the GLTF file was generated, there could be one animation clip with all tracks included.
console.log(model.animations[0].tracks)
You have the option to separate these clips into individual ones to control them independently.
const clip1 = model.animations[0]
const clip2 = new AnimationClip('clip2', -1, []) // -1 for auto-calculate duration
// Moving a track from clip1 to clip2
const track = clip1.tracks.pop()
clip2.tracks.push(track)
clip2.resetDuration() // auto-calculate duration
Now you have two clips where clip1 contains most tracks except the one moved to clip2.
Proceed as needed, perhaps creating your own criteria based on track names or other factors for splitting the animation further.
For more in-depth information, check out my forum post: