Optimal way to render multiple scenes with large numbers of objects in Three.js

Question

Imagine that you want to draw two scenes, each with hundreds of spheres, and provide the ability to switch between these scenes. What is an optimal way to do this?

Currently a switch takes about 4 to 5 seconds because I am deleting, creating, and drawing all of the spheres on each switch. Below is an example of the code that runs on a scene switch.

clearObjects();
resetCamera();  

for(var i = 0; i < 500; i++) {
    var geometry = new THREE.SphereGeometry(radius, 50, 50);
    var material = new THREE.MeshLambertMaterial({color: 0xFFCC33});
    var sphere = new THREE.Mesh(geometry, material);
    sphere.position.set(randX, randY, randZ);

    scene.add(sphere);
    objects.push(sphere);   
}

Answer 1

Once again, why don't you just use one scene, split it in 2 parts, set your camera FOV (field of view) so that you can see just one scene part at a time and then just move your camera position... Doesn't it sound more efficient?

If there are no particular reasons for using 2 scenes, you can always implement your code with just one scene. So try the method I described above or explain your reasons to use 2 scenes.

Edit: You can also use two THREE.Object3D containers to represent your 2 scenes, where you can store all of your certain scene objects and then just show/hide one of the containers at a time. Than way you can manipulate all of the container's contents using yourContainer.children[n].

So generally, that is what you want to do:

var scene1Container = new THREE.Object3D();
var scene2Container = new THREE.Object3D();

scene1Container.add(firstObjectFromScene1);
//.....
scene1Container.add(nObjectFromScene1);

scene2Container.add(firstObjectFromScene2);
//.....
scene2Container.add(nObjectFromScene2);

now you can just show/hide one of the containers at a time using scene1Container.visible = true/false; (And manage scene1Container.traverse to apply visibility change to all of the children of your object).