如何清除THREE.JS场景

Question

我试图找到方法清除场景中的所有对象而不破坏场景本身.我知道命名对象是一种方式,然后当我们想要删除对象时,我们只是通过它的名称"获取"它.但是,我想找到一种快速方法来清除其中所有对象的场景,无论它们的名称如何.有一个简单的方法吗？谢谢!

Answer 1

您可以遍历场景的子对象并逐个删除它们.

scene.children.forEach(function(object){
    scene.remove(object);
});

编辑:

正如评论中所建议的,上述答案是错误的.从场景中删除所有对象的正确方法是使用for/while循环.

while(scene.children.length > 0){ 
    scene.remove(scene.children[0]); 
}

注意:这只是对象层次结构的快速而脏的清除.如果您计划大量执行此操作,则可能会因上面的代码而导致内存泄漏,因为渲染器引用了对象材质,纹理和几何.完全清理场景更复杂,还有许多其他问题需要更详细:

• Three.js Collada - 处理()和释放内存(垃圾收集)的正确方法是什么？
• 三个js正确从场景中删除对象(仍然在HEAP中保留)
• 从场景中删除网格时释放堆对象

Answer 2

遍历所有子项并调用它们的几何形状，材质和纹理。下面的代码是我的解决方案。

function clearThree(obj){
  while(obj.children.length > 0){ 
    clearThree(obj.children[0])
    obj.remove(obj.children[0]);
  }
  if(obj.geometry) obj.geometry.dispose()

  if(obj.material){ 
    //in case of map, bumpMap, normalMap, envMap ...
    Object.keys(obj.material).forEach(prop => {
      if(!obj.material[prop])
        return         
      if(typeof obj.material[prop].dispose === 'function')                                  
        obj.material[prop].dispose()                                                        
    })
    obj.material.dispose()
  }
}   

clearThree(scene)

Answer 3

我有一个更简洁的方法。我注意到removeObject3D 的方法接受多个参数来删除对象。这允许我们通过利用函数children的内置apply方法来修改将每个元素用作单独参数的调用来使用整个数组。这是这样的：

scene.remove.apply(scene, scene.children);