I am trying a load a model and animation using GLTF Loader, both model and animation are in separate file. The model basically has to categories of animations 1 is idle and other is talking.
So when i intialize the Animation mixer only once when the model is loaded....i'm not able to see the animations applied to the model. But when i clear the animation mixer everytime animation changes from idle to talking then i am able to see animations with the model. But the problem is whenever it switches from idle to talking it first sets to null as maybe te animation mixer is re initialized.
How can i solve this problem??
This is the code that is not working...
useEffect(() => {
if (model) {
if (!mixer.current) mixer.current = new THREE.AnimationMixer(model);
}
}, [model]);
useEffect(() => {
return () => {
if (mixer.current) {
mixer.current.stopAllAction();
mixer.current.uncacheRoot(mixer.current.getRoot());
mixer.current = null;
}
};
}, []);
This is the code that works but there is issue between transition as the Animation Mixer is re intialized everytime the animation changes from idle to talking..
useEffect(() => {
if (!mixer.current) mixer.current = new THREE.AnimationMixer(model);
if (
mixer.current &&
allAnimations.current.length > 0
) {
playRandomAnimation();
}
return () => {
if (mixer.current) {
mixer.current.stopAllAction();
mixer.current.uncacheRoot(mixer.current.getRoot());
mixer.current = null;
}
};
}, [allAnimations.current]);
I tried both the ways and the second one works but because we are re initializing the animation mixer agian there is abrupt transition as it goes to null animation in between.
For the other approach where the mixer is initialized only once...the animation dont work but when i concole log animation mixer on each frame there it shows array of animations that have been played inside _nActiveActions. How can i solve this issue. Here allAnimation changes whenver the animation changes between idel adn talking.