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

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

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

Edit:您还可以使用两个THREE.Object3D容器来表示您的 2 个场景，您可以在其中存储所有特定场景对象，然后一次仅显示/隐藏其中一个容器。您可以使用以下方式操作所有容器的内容yourContainer.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.traverse将可见性更改应用于对象的所有子对象）。