Trigger function on particular animation keyframe in .glb model

Hello All,

Can you anyone please tell me how can I trigger an event or function on a specific key frame of animation in .glb model like Unity.

ex I have multiple animations in glb model. So when the animation reaches at half or 70% need to trigger a function.

Thanks

three.js does not provide such a system. However, it’s not complicated to implement a custom solution based on AnimationClip.duration and AnimationAction.time.

So if you compute action.time / clip.duration like in the following fiddle, you know how much the animation has been advanced. The resulting value lies in the range of [0, 1].

https://jsfiddle.net/3o72k5z6/1/

2 Likes

Hey @Mugen87 Thanks for your help.

I found a better way to get the current keyframe and total keyframe on animation:-

 onFrameUpdate() {
        this._isPlaying = this.clip.isRunning();
        if (!this._isPlaying) {
            this.stop();
            return;
        }
        
        
        let totalFrame = Math.ceil(this.clip.getClip().duration * 30);
        let frame = Math.ceil(this.clip.time * 30);
        this.keyframe = frame;
        
        this._currentFrame = frame;
        if (this._currentFrame !== this._prevFrame) {
            if (this._callback)
                this._callback(this._currentFrame, this.clip, totalFrame)
        }

        this._prevFrame = this._currentFrame;

    }