Switch between two scenes using the same renderer in three.js

Question

I have been trying to find a way to be able to toggle between two scenes in three.js. I am aware that one can load a scene by using sceneLoader / exportScene combo. Code taken from josdirksen/learning-threejs - loading a scene ``` var controls = new function () { this.exportScene = function () { var exporter = new THREE.SceneExporter(); var sceneJson = JSON.stringify(exporter.parse(scene)); localStorage.setItem('scene', sceneJson); }; this.clearScene = function () { scene = new THREE.Scene(); }; this.importScene = function () { var json = (localStorage.getItem('scene')); var sceneLoader = new THREE.SceneLoader(); sceneLoader.parse(JSON.parse(json), function (e) { scene = e.scene; }, '.'); } }; ``` From my understanding of the above code you need to have the scene loaded first before you can extract it and save to local storage before you can put it back into the scene. I am also aware that SceneLoader is now deprecated. For my senario I want to have an initial scene load and by clicki…

Accepted Answer

If you need to just switch to new scene, then why not have two scene object and one main scene. Try following code

```
/* Buttons to handle scene switch */
$("#scene2").click(function() {
  scene = scene2
})
$("#scene1").click(function() {
  scene = scene1
})

function init() {
  ....

/* I dont think you need to add camera to scene for viewing perpose. By doing this, essentially you are adding camera object to scene, and you won't be able to see it because scene is rendered using this camera and camera eye is at same location
  */
  scene1 = new THREE.Scene();
  // Build scene1
  //  scene1.add(camera);

scene2 = new THREE.Scene();
  // Build scene2

// Choosing default scene as scene1
  scene = scene1;
}
function render() {
  // Try some checking to update what is necessary

renderer.render(scene, camera);

}
```

Updated jsfiddle

Switch between two scenes using the same renderer in three.js

Solution

Problem