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

问题描述

想象一下，您要绘制两个场景，每个场景都有数百个球体，并提供在这些场景之间切换的能力.这样做的最佳方法是什么?

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?

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

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

推荐答案

再说一次，为什么不只使用一个场景，将其分成 2 部分，设置相机 FOV(视野)以便您可以看到一次只做一个场景，然后移动你的相机位置……听起来是不是更有效率?

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?

如果没有特殊原因使用 2 个场景，您始终可以只使用一个场景来实现您的代码.所以试试我上面描述的方法或解释你使用2个场景的原因.

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.

您还可以使用两个 THREE.Object3D 容器来表示您的 2 个场景，您可以在其中存储所有特定场景对象，然后仅显示/隐藏一次一个容器.比起使用 yourContainer.children[n] 操作所有容器内容的方式.

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

现在您可以使用 scene1Container.visible = true/false;(并管理 scene1Container.traverse 以应用可见性更改)一次只显示/隐藏一个容器对象的所有子对象).

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).

这篇关于在 Three.js 中渲染具有大量对象的多个场景的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！