three.js在单页webapp中正确重启场景

Question

Right now I'm trying to do a single page app with multiple “slides” as different divs which are hidden unless they are the currently visible slide.

One slide contains a canvas element and a ThreeJS scene. This scene is loaded as soon as the containing div (->slide) is visible.

The user is able to proceed to the next slide which doesn't contain a threejs scene.

The user is able to get back to the slide with the threejs scene but it is not necessary to save the state of the scene, the scene should reload completely.

The scene is now all set up but actually I did not find any suitable information on my problem. I'm wondering what the best approach would be firstly memory-wise and secondly to reset the scene completely.

• Should I remove every object from the scene and add them again if necessary? If so, what would be the best method to do that?
• What exactly is happening on .dispose()?
• Is there some kind of routine to remove every object/group/texture/material/whatever from a scene at once? And dispose any memories?
• is there anything else i should consider when resetting a scene?

A lot of questions, I know. But a lot of answers to these questions relate to old threejs versions or somehow don't work anymore. Any answer is really appreciated!

Answer 1

A few ideas that might give you hints...

About "hiding" the scene

I would simply stop rendering (calling the render/animate loop) when container div is not visible.

About "showing" the scene again

Reloading external ressources (textures, models...) seems pointless and, depending on your scene, reloading everything could be a real pain for users. What is loaded should remain available to your renderer. If you need to reset your scene though, you should wrap it in an init() function, to be called again when container becomes visible again.

Using workers

Depending on your precise use case, using workers could be a good idea too. If your scene is made of loads of heavy files, then making sure the rest of the page is available to the user (no freeze/stutter) while loading is a good idea. Here are a few examples