Webgl 在Three.js中渲染具有大量对象的多个场景的最佳方法

假设您想要绘制两个场景，每个场景有数百个球体，并提供在这些场景之间切换的功能。这样做的最佳方式是什么

目前，开关大约需要4到5秒，因为我正在删除、创建和绘制每个开关上的所有球体。下面是在场景开关上运行的代码示例

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);   
}

clearObjects（）；
重置摄像头（）；
对于（变量i=0；i<500；i++）{
var几何=新的三个。球化法（半径，50，50）；
var material=new THREE.MeshLambertMaterial（{color:0xFFCC33}）；
var sphere=新的三个网格（几何体、材质）；
sphere.position.set（randX，randY，randZ）；
场景。添加（球体）；
物体。推（球）；
}

再一次，为什么不使用一个场景，将其分成两部分，设置您的相机FOV（视野），以便一次只能看到一个场景部分，然后移动相机位置。。。听起来不是更有效率吗

如果没有使用两个场景的特殊原因，则始终可以仅使用一个场景来实现代码。因此，请尝试我上面描述的方法或解释使用2个场景的原因

编辑：您还可以使用两个

THREE.Object3D

容器来表示两个场景，您可以在其中存储所有特定场景对象，然后一次只显示/隐藏其中一个容器。而不是使用

yourcainer.children[n]

操纵容器所有内容的方式

所以一般来说，这就是你想要做的：

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

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

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

---

现在，您可以使用

scene1Container.visible=true/false一次显示/隐藏一个容器

（并管理

scene1Container。遍历
以将可见性更改应用于对象的所有子对象）。
我设置了允许用户在场景中移动的控件。那么为什么不创建一个空的
var object=THREE.Object3D
容器，将所有场景#1对象添加到其中，并仅将容器对象添加到场景中。然后创建另一个容器并将场景#2的对象放在那里。这样，您可以简单地设置
object.visible=true/false
Nice。我清楚地看到设置
object.visible
属性比重新创建和销毁所有对象要好得多。我读过一些关于制作一个包含多个对象的主对象以提高效率的文章。我的项目的一个要求是能够点击并关注每个领域，我不确定如果我使用这种方法，我是否能够做到这一点。你肯定能够做到！只需像这样到达您的球体：
containerObject.children[27]
。它不像一个
合并
方法，所有的对象网格相互连接，它真的像一个容器，你可以在其中存储你的对象（就像你电脑上的一个文件夹）。仅供参考，因为r71 three.js可见性会影响孩子，所以不需要遍历