The best way to render multiple scenes with lots 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 the best way to do this?

Currently, the switch takes 4 to 5 seconds, because I delete, create and draw all the spheres on each switch. The following is an example of code that executes on a scene switcher.

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, divide it into 2 parts, set the FOV (field of view) of the camera so that you can see only one part of the scene at a time, and then just move the position of your camera ... Doesn’t it seem is it more efficient?

If there is no particular reason for using 2 scenes, you can always implement your code with only one scene. Therefore, try the method described above or explain the reasons for using two scenes.

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

This is usually 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 simply show / hide one of the containers at a time using scene1Container.visible = true/false; (and manage scene1Container.traverse to apply the visibility change to all the children of your object).