As I work on my React app using THREE.js, I find myself working with two key components: a carousel scene created in THREE.js and a full-screen overlay scene. When the overlay scene is active, I want to pause the carousel scene since it is not visible.
Currently, I am halting the animation frame using window.cancelAnimationFrame. However, I have come across snippets where people simply set a boolean variable like stop to true. Within the update loop, it would look something like this:
update() {
if (this.stop) {
this.renderer.render(this.scene, this.camera);
}
this.frameId = window.requestAnimationFrame(this.update);
}
I am curious if one method offers better performance over the other. Is canceling and restarting an animation frame more resource-intensive compared to maintaining the animation loop continuously?