Animation T-poses on switching animation clips

Questions
,
1

Hello,

I am trying to make a sort of animation controller where I can register and call transitions but am running into an issue with the state switching. When I want to change the animation, I want to wait for the end of the current loop (I will expand this later to also be able to blend immediately) but am unable to figure out why the character is freezeframing in t-pose every so often (when one of the animation clips is loaded after finishing another animation)

Full context of the code:
Component: portfolio-project/three-js-interactive.component.ts at 3b3cefd6214b666b98d2b04780c1d4e309357374 · torbenvanassche/portfolio-project · GitHub
AnimationController: portfolio-project/animation-controller.ts at master · torbenvanassche/portfolio-project · GitHub

playClip = (id: string, once: boolean = false) => {
        const activeClip = this.clips.get(id);
        if (activeClip !== undefined) {
            var lastAction = this.activeAction;
            lastAction?.fadeOut(0.01);
            this.activeAction = this.mixer.clipAction(activeClip).reset().fadeIn(0.01).play();

            if (once) {
                this.activeAction.loop = THREE.LoopOnce;
            }
        }

        return this.clipEnded;
    }

    transition(id: string, playOnce: boolean) {
        if(playOnce) {
            this.activeAction?.setLoop(THREE.LoopOnce, 1);
        }

        this.clipEnded?.subscribe(x => {
            this.playClip(id);
        })

        return this.clipEnded;
    }

    constructor(gltf: GLTF) {
        this.mixer.addEventListener('finished', () => {
            if (this.activeAction) {
                this.clipEnded?.next(this.activeAction);
            }
        })

        this.dog.playClip('sit_idle', false);

        window.addEventListener('click', () => {
          this.dog.transition('sit_bark', true)?.subscribe(x => {
            this.dog.transition('sit_idle', true);
          })
        })
    }

Any feedback/info is appreciated!

2

I did some additional digging and am toying with the idea of creating my own animation playing system for this. Is there a way I can get the current progress on an animation?

I know the property duration exists, but can I somehow figure out a % of progress on the animation that is being played?

3

I believe you are looking for the clampWhenFinished property. This should leave the mesh in the same state as the last frame of the clip that has been playing.

Docs: three.js docs

4

Thank you for pointing that out, I have revised my code to do this now and that seems to have fixed it.
There is a follow-up issue however. The bark animation appears to be playing on top of the idle. Whereas I want it to stop playing the idle animation while playing the bark, then onComplete it should go back to playing idle (by listening for the finished event on the mixer).

Would you be able to view the updated code and tell me what could be causing that as well?

EDIT: Made a code revision, made a mistake such that previousAction and activeAction referred to the saem object so the original never got faded out.