I have a program with multiple scenes, but only one scene will be visible at a time. How can I stop the animation for all other scenes except the current one to improve performance? Each scene has many objects that are straining the performance.
I believe using cancelAnimationFrame() could help, but I'm not sure how to implement it. Is this the best practice as recommended on Stack Overflow to improve performance?
The scenes are stored in an array, with the current scene determined by the user input numerical value passed to the scenes[] array.
function changeScene() {
// Set the currentScene to the user selection
var sceneNumber = list.options[list.selectedIndex].value;
currentScene = scenes[sceneNumber-1];
// Hide all scenes by default
for (var j=0; j<10; j++) {
scenes[j].visible = false;
}
}
I have set all scenes to be hidden by default, except for the currentScene. However, I need guidance on how to use cancelAnimationFrame() in this scenario. Additionally, I'm curious if using cancelAnimationFrame() will only take effect after all scenes and objects have loaded, or if it can help reduce loading time as well.
Here is a link to my FIDDLE containing the code mentioned above.