从Three.js场景中删除许多对象的速度较慢

Removing many objects from Three.js scene slow

本文关键字：多对象 速度 删除 js Three      更新时间：2023-09-26

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

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

由于浏览器在删除对象期间被阻止，因此网站在这段时间内无法使用。您认为有什么方法可以提高对象移除性能或使其不阻塞（没有用于移除单个元素的setTimeout()）吗？

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

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

http://jsfiddle.net/2t8j5caj/

去除时间：0.135000000000021828ms，渲染时间：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);
相关文章：