Question

我们处理具有许多单个对象的大型Three.js场景。很容易得到具有25k到50k Object3D个实例的场景。是的，这很多，但我们目前看不到降低这个数字的简单方法。通过删除所有对象来清除这样的场景通常需要大约两分钟。这是用scene.remove(element);单独删除每个元素并首先收集所有元素并调用scene.remove(element1, element2, ...);的情况。我们也尝试更换完整的场景实例，但无济于事：它仍然很慢。

我们看到不同显卡之间存在一些差异，并怀疑这与使用大量缓冲区几何形状有关，这些缓冲区几何形状可能需要从显卡中移除（这会对性能产生一些影响）。

由于浏览器在删除对象期间阻塞，因此该网站在这段时间内无法使用。您是否看到任何提高对象删除性能或使其无阻塞的方法（没有setTimeout()删除单个元素）？

这以简化的方式显示问题（使用50k立方体，在第一帧之后删除，但我们的一些对象要复杂得多）：http://jsfiddle.net/ua2mg5ty/

Answer 1

尝试网格合并并删除单个网格。

http://jsfiddle.net/2t8j5caj/

清除时间：0.13500000000021828ms，渲染时间：3.6000000000012733ms

var mesh = new THREE.Mesh(singleGeometry, material);
for (var i = 0; i < nCubes; i++) {
  var box = new THREE.BoxGeometry(1, 1, 1);
  var cube = new THREE.Mesh(box);
  cube.position.x = (Math.random() - 0.5) * 5;
  cube.position.y = (Math.random() - 0.5) * 5;
  cube.position.z = (Math.random() - 0.5) * 5;
  cube.scale.set((Math.random() - 1 * cubeSize), (Math.random() - 1 * cubeSize), (Math.random() - 1 * cubeSize))
  cube.updateMatrix();

  singleGeometry.merge(cube.geometry, cube.matrix);
}
var mesh = new THREE.Mesh(singleGeometry, material);
scene.add(mesh);

从Three.js场景中删除许多对象会导致

1 个答案: