I'm developing a site with hero banners made with three.js. The scenes are VERY simple, and the render run at 60fps even on low end devices. But on mobile I'm experiencing an issue. When a page is scrolled down quite a lot and then scrolled up again, the browser freezes for 1-2 sec (on my device, Android with Chrome Mobile).
I think that is due to Chrome "saving resources" while the canvas is not visible on the viewport. How can I prevent this from happening?
CodePudding user response：
You have 28 scripts, so maybe there is a lot of overhead. You might try reducing scripts, resolution, and/or switch to a setTimeout. Ultimately, I think this is a direct explanation:
- requestPostAnimationFrame spec proposal
- Why is requestAnimationFrame() running my code at the end of a frame, and not at the start of it?
- requestAnimationFrame() not for animation
CodePudding user response：
I fixed my own problem by stopping the rendering while the canvas is out of the viewport with a cancelAnimationFrame.
More info in this question: three.js how to stop render when the user can't see the 3d space?