Jump from one animation to another animation's any frame. goToFrame not working as expected

Here’s my:
Github Repo
Couldn’t create a playground as half of my code is in HTML.

I am trying to create a single slider that will have timelines for all the animations of a gltf file. Hotspots will indicate the end of one animation and start of other. User can choose to play all animations or select from dropdown to play single animation in loop, pinpong or onlyOnce mode.
While I am able to do all of this:

  1. placing animation times on slider
  2. Jumping between animations
  3. Loop, ping pong and Only once mode

One thing I am stuck at is jumping to any frame of any animation back and forth as the user inputs on slider.

I am using goToFrame and passing the slider value according to the animation selected but it isn’t working properly.
Would be grateful if anyone can take time to have a look at the repo and provide some insights.

Hi @M_K

It seems you want to make something similar to babylon sandbox. Have you checked the sandbox source code.

sandbox slider

Yes… I have… But in sandbox the slider shows only one animation at a time… While my slider will show all animations of gltf file in a sequence… They will be seperated by hotspots(basically dots). When I select animation from dropdown the slider thumb will move to the start of that animation.

Your model doesn’t load. I changed a different to test. The code you wrote for creating hotspot doesn’t look right to me. I think the end time for the last animation group is not correct. Why not loop to the end of array but n - 1? Your animationEndTimes don’t have the same length as animationsArray at the end of loop. It only has n-1 items.

for(var k = 0; k < animationsArray.length - 1; k++)
{
       hotspotVal += animationTime[k];
       animationEndTimes.push(hotspotVal);
 }

And then this would only give you time[n-2] + time[n-3], not time[n-1] + time[n-2]
animationEndTimes.push(animationEndTimes[animationEndTimes.length - 1] + animationTime[animationTime.length - 2]);

I think its issue in your coding. Please check the time if it you assigned to each hotspot is correct. Otherwise the animation looks good to me.

@M_K I checked a bit more. Your slider seems only take render integer steps. Float number is rounded using floor function. E.g. if i change 7.624999821186066 to 7, the slider doesn’t change its position. If I change to 6 or 8 it moves.

@slin Thanks for taking time to look at it.
You were right about the hotspots. Fixed that(uploaded updated repo at same location), but that doesn’t seem to solve the actual problem. Also tried rounding seek values but then it doesn’t jump to the proper animation.
How can I fix this issue :
I have 2 animations :
Animation1 - Time : 0 - 4.23
Animation2 - Time : 0 - 7.5
I start first animation play it till 3.1 then pause and using slider jump to second one and seek frame 5.8 and then hit play.
Ideally my second animation should start playing from 5.9 but in my case it starts from 3.2 i.e it continues where first animation left off.

Hi @M_K ,

Rounding was the problem, not solution. E.g. You have a model with two animation groups.

Animation1 - Time : 0 - 4.23
Animation2 - Time : 0 - 7.5

Then you expect to have hotspot at 0, 4.23. And total length of slider to be 11.73.

But your slider would display hotspots at 0, 4. And the total length of your slider is 11. The slider only allows you to seek frame at integer intervals like 0, 1, 2, 3,… 10, 11.

You will need to have a slider implementation so that you can define hotspots at 4.23 and total slider length 11.73, and allow you to seek float values etc. Or you can try to scale up the float values. E.g. Your slider range would be 0 - 1173. And you set hotspot at 0, 423. And for each seek value you do seekValue / 100.

I may be wrong but that doesn’t seem to be the issue. See this
image
The value of my hotspot sliders is in float and the last slider “b” which is slider used to seek, its value is also in float.

Now change value 4.23333 to the rounded integer 4. You would see the hotspot position won’t change. Change it to 5 does

It does change for me. Changing 4.23 to 4 or 4.5 , the hotspot changes its position.

Got this working. The problem was in the play button code. Used animation.start() after gotoFrame() to start animation instead of animation.play() and it started working.
Thanks !!

1 Like