Is control mixer animation playback with a slider possible?

Questions
1

Hi Folks!

I have an animated .glb model that has one animation clip. I managed to add the play, pause and reset animation buttons but I wonder if it is possible to add a slider and make the animation play as the slider value is changed.

I thought that I can just create a slider that has the same number of values as the animation frames and connect the two but seems like three.js mixer does not really use animation frames.

Any ideas on how to make this happen much appreciated.

Thanks for your help!

1 Like
2

Do you mean mixer.time? (Optionally multiplied by .timeScale should give you precise current frame.)

3

At this point I have absolutely no idea how to do this so I’m open for any suggestions.

What can I do with mixer.time?

Thanks for your help.

4

Here is what I came up with which is a little ‘rough round the edges’ but it’s working for me.

In the animation loop, I’m getting the clip.time value rounded off to the second decimal point, which gives me values ranging from 0 to 7.5 in 0.01 increments. The maximum value is also the total length of the animation. Finally, I created a small progress bar to show the animation progress.

Then, when you pause the animation, another progress bar appears where you get to control playback with the slider. The slider has an event listener and sets the clip.time to the current value on change.

Playback is not as smooth as you get when the animation is playing but that’s the best you can get with a slider. I could probably increase the slider’s value range (by getting more granular clip.time values) to see if playback will be smoother.

Anyways, any suggestions on how to improve this welcomed!

https://codepen.io/grzegorz-rogala/pen/ZYWNEWm/3380d259631af582abd94a91cf0c0cc5?editors=1010

2 Likes