ZoEM
ZoEM

Reputation: 852

How do I stop animations for multiples scenes except the current one?

My program has multiple scenes. Only 1 scene will be at all times visible of course, so how do I stop the animation for all the other scenes except the current scene to improve performance? There are 10 scenes and each of them has a lot of objects that strain the performance.

I know it can be probably done with cancelAnimationFrame(), but how to implement it? Supposedly, this is the best practice as recommended to go about it in order to improve performance?

The 10 scenes are an array of scenes. The current scene is 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 already programmed all scenes to be hidden by default except for the currentScene. But I have found no help researching how to use the cancelAnimationFrame() in my case. Also, a follow-up question: will using cancelAnimationFrame() only activate after the page has loaded all the scenes with all the objects? Or would it help that loading time as well?

My FIDDLE with the above and related code.

Upvotes: 0

Views: 54

Answers (1)

Matey
Matey

Reputation: 1210

Animation is the change of numeric parameters over time. In your example that means changing the spinningRig rotation angle inside your animate() method. As long as you change the rotation for the current scene only -- which you actually do -- the other scenes are not being animated.

If you're perhaps addressing rendering instead of animation there is again no need to worry because Three.JS renders only the one scene you specify in renderer.render().

Or are you addressing anything other? Animation clearly isn't a problem here.

Upvotes: 2

Related Questions