How can I pause the Clock, without having elapsedTime increased or reset when resuming?

Questions
,
1

I’m doing a simulation of a solar system and I want to implement a “start/pause animation” button.
I’m using “cancelAnimationRequest” to stop the animation, and set clock.running = false;
But when I resume the animation (with clock.running = true;), all planets jump to a “future position” because elapsedTime still increased during the pause.
I also tried calling clock.getDelta(); before resuming the animation, but this makes all planets jump to their initial position.
How can I stop elapsedTime from increasing during the pause, without having to reset it?

1 Like
2

Hi, welcome to the forum,

Looking at Clock’s code, it seems the value you get when calling getDelta to animate your scene is the diff value between Date.now() and this.oldTime, unless this.running is falsy, in which case you get 0 :

So your issue is that when you set running to true again, oldTime didn’t change and a big diff is returned.

But if you call Clock.start() to restart your clock instead of setting running to true, oldTime will be set to the current date in addition to running being set to true, so you will get a normal diff.

3

@felixmariotto If @lai calls Clock.start(), elapsedTime will be set to 0 which probably breaks her animation.

Unfortunately, the Clock class has some conceptual issues (e.g. https://github.com/mrdoob/three.js/issues/5696) and should be replaced with something new. Some time ago, I’ve submitted a PR that introduces a new Timer class. You could use the code in your project and then just call timer.reset(), if you resume your animation. The method might be renamed in the future since it does not perform a real reset operation of all timer values. However, it should do what you are looking for.

The PR also updates an example that shows how the replacement of Clock with this new class looks like.

5 Likes
4

The timer class works like a charm! Thank you :slight_smile:

1 Like
5

What happened to Timer.js? I tried looking in examples/jsm/misc/Timer but can’t find it there.

6

Unfortunately, the respective PR was never merged. It seems the suggested API did not get enough support.

1 Like
7

For me it actually worked to just save the elapsedTime and after clock.start() just set clock.elapsedTime = previous.

1 Like