vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
1.97k stars 293 forks source link

resumeAnimation causes globe to spin very fast (catch up with missed autoRotation) #199

Closed martenls closed 2 months ago

martenls commented 2 months ago

Im using the autoRotate feature of the globe controls and implemented a mechanism where the animation is paused when the page is not visible to save resources.

watch(pageVisibility, (current) => {
  if (current == 'visible') {
    if (gameState.value == GameState.PresetSelection && selectedPreset.value == Preset.World) {
      globe.controls().autoRotate = true;
    }
    globe.resumeAnimation()
  } else {
    globe.controls().autoRotate = false;
    globe.pauseAnimation()
  }
})

However, this causes the globe to spin very fast for a short amount of time after resumeAnimation() is called. It seems it tries to catch up to the rotation it would have usually reached in the time the tab was inactive (if the page is not active for a longer time the fast spin takes longer).

Is there any way to prevent this behavior?

vasturiano commented 2 months ago

@martenls thanks for your report.

I've just fixed this issue. It was in another package that is a direct dependency of this one: three-render-objects. So all you should need to do is update your dependency tree to include at least v1.29.4 of that package. Then you shouldn't experience this issue any more.

Please let me know if it fixes it for you.

martenls commented 2 months ago

I updated the dependencies and the issue is gone.

Thanks for the quick answer and for your work on the project!