Hi 
I am cloning an imported animation to re-use in multiple angles and so far my code goes something like:
loader.load(
modelPath,
function(gltf) {
let model = gltf.scene
let clips = gltf.animations
root = model.getObjectByName('BoneRoot')
...
}
})
scene.add(model)
loaderAnim.remove()
mixer = new THREE.AnimationMixer(model)
let waveAnim = THREE.AnimationClip.findByName(clips, ‘wave’)
let waveRight = waveAnim.clone()
let waveLeft = waveAnim.clone()
if (THREE.AnimationClip.name = waveRight) { // but this applies on both waveRight & waveLeft
waveRight.tracks.splice(1, 1)
root.rotation.z = -.5 * Math.PI
}
if (THREE.AnimationClip.name = waveLeft) { // same thing … waveRight & waveLeft
waveLeft.tracks.splice(1, 1)
root.rotation.z = .5 * Math.PI
}
This might be very wrong or is it just how Three.js works: animation clone doesn’t create an individual copy??
Help would be appreciated : )
THREE.AnimationClip.name doesn’t look right… did you mean to assign a name to each clip and compare it against a string? Perhaps you can share what error you’re seeing when running this code?
clip.clone() doesn’t create a deep copy (.tracks will be a different array, with the same tracks inside it) but things like .name are definitely not shared between two instances.
Hi Don!
THREE.AnimationClip.name doesn’t look right… did you mean to assign a name to each clip and compare it against a string? Perhaps you can share what error you’re seeing when running this code?
This if statment does look strange but I actually have no error from it.
(…) but things like .name are definitely not shared between two instances.
May I ask how would you do to separate the two instances waveRightand waveLeft, both being copies of the same waveAnim?
Actualy the only solution would be to make deep copies of an AnimationClip.
It’s not going to do anything useful, though. There is no static .name property on the AnimationClip constructor. You probably want to do something like this:
let waveRight = waveAnim.clone()
waveRight.name = 'right';
waveRight.tracks.splice(1,1);
// ...
But I’m afraid I can’t fully tell what you’re trying to do to these clips, the code you share isn’t obvious to me. Can you share your complete code somewhere?
Thanks for your concern Don, I’m honored. It might be untidy as I’m digging into it but here is the full script.
I am basically trying to save memory by using one animation for a character facing multiple directions. I hope this will make more sense.
If clip.clone() creates a different array, how could I select the Root bone for each cloned clip?
Each track has a name that identifies the object and property it animates. Each mixer has a root object, that identifies where in the scene it looks for the objects with names matching the tracks.
I am basically trying to save memory by using one animation for a character facing multiple directions. I hope this will make more sense.
This sounds like an extremely hard way to do that… modifying animation data (in code, as opposed to Blender) often requires a full understanding of both the three.js animation system, and the specific animation data coming out of your files. I would try to get something working first before you try to save memory that way.
Perhaps what you want is additive animation? If you make the animation additive, you can play the animation and also rotate the object manually in your code without those interfering. Otherwise you may need to share in more detail what you’re trying to do.
Yep, I’ll probably do that at first.
Perhaps what you want is additive animation? If you make the animation additive, you can play the animation and also rotate the object manually in your code without those interfering.
This could be a suitable option and I’m still trying to figure out how to work the makeClipAdditive method atm.
Otherwise you may need to share in more detail what you’re trying to do.
Indeed, I might set a concrete example later on to share here.
Thank you so much for all your inputs so far!
Hello Don, I’ve set an exemple project here.
In fact using additive animation might not be mandatory for my case, since the root bone has no keyframes I am just trying to rotate it for each clone of the AnimationClip.
I would like to rotate this root bone for each of this AnimationClip clones but don’t know yet how:
It looks like you’re rotating the root object when you create the clips. The last rotation is always going to overwrite the first two, there’s no association with any clip here. Perhaps you want to rotate the object when you play a clip?
Yes so I .splice the root bone so i can manipulate it (rotation) then the last rotation indeed overides the two others. And that’s my problem, I woud like to change the root.rotation.z on each cloned clip but separately.
As you can see in my exemple, the animation works fine when clicking on back and I would like to do the same on left & right.
Then do I have an overlaping animation problem… which I need to fix later…
I tried something like this before and the result wasn’t very good… or maybe my code wasn’t very good.
