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

时间:2012-12-09 21:32:41

标签: 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);   
}

1 个答案:

答案 0 :(得分:6)

再一次,你为什么不只使用一个场景,将它分成两部分,设置你的相机FOV(视野),这样你一次只能看到一个场景部分,然后只需移动你的相机位置......听起来效率不高吗?

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

编辑:您还可以使用两个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以将可见性更改应用于对象的所有子项。)