is there a way to split animation based on a model's parts in three js?
so I am new to three.js and am trying to work on a project where I came across the following requirement 1)load a humanoid gltf model 2)play animations on that 3) stop or play animation for only the head part of the gltf model without changing animation files in blender is this possible?
lookin for help in this problem because the animation file contains 1000s of animations and it will be difficult to modify all .so the next solution will be if we can control parts of the model during animation in three.js
Answer
you can split the animations into separate animations using the model.animations that you get when you load the model (f.e. with GLTFLoader, FBXLoader, etc).
new GLTFLoader().load('foo.gltf', (model) => {
console.log(model.animations)
})
model.animations will be an array of AnimationClip objects. Each animation clip contains a list of tracks. Depending on how the GLTF file was created, it could be that there is a single animation clip containing all of the tracks.
console.log(model.animations[0].tracks)
You can feel free to split these clips up into multiple clips, that way you can control them independently.
const clip1 = model.animations[0]
const clip2 = new AnimationClip('clip2', -1, []) // -1 means we will auto-calculate the duration.
// move one track from the first clip to the second
const track = clip1.tracks.pop()
clip2.tracks.push(track)
clip2.resetDuration() // auto-calculate the duration
Now you have two clips, the first clip1 has all the tracks except for one track that is now inside of clip2.
Now you can continue as before. You may want to make your own hueristics for finding the tracks to split, for example by looking for them based on their name, or etc.
I wrote a forum post with more detail here: