When I minimize and maximize the browser or switch between browser tabs, the animation of objects in the Three.js becomes stuttering

Questions
1

Has anyone encountered a similar issue?

2

That user experience and ways of handling it greatly depend on the use case, and your custom code.

  1. For animations you usually pass dt to update method to update the mixer. Passing a large time delta can result in things going crazy.
  2. requestAnimationFrame is called only when your browser and tab are open. Switching tabs will temporarily disable the requestAnimationFrame from being executed. Make sure you’re not handling any important, time-dependent logic there - use setTimeout / setInterval instead, as it’ll keep executing even when the tab is not in focus (it slows down when you minimise the browser, but it won’t stop. So if you update mixer in setTimeout / setInterval loop, deltas will not get too big.)
  3. Alternatively, you can just pause the entire logic and rendering when tab / browser is minised - visibilitychange event on document should help with that.
1 Like