如何清除THREE.JS场景

I am trying to find ways of clearing all the objects in a scene without destroying the scene itself. I know that naming the object is one way and then when we want to delete the object, we just "get" it by its name. However, I want to find a quick way to clear a scene of all the objects in it, regardless of their names. Is there a easy way to do it? Thanks!

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

3 个解决方案

#1

You can traverse the child objects of the scene and remove them one by one.

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

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

Edit:

As suggested in the comments, the above answer is wrong. The correct way to remove all objects from the scene is using a for/while loop.

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

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

Note: This is just a quick and dirty clearing of the object hierarchy. If you plan on doing this a lot you risk running in to memory leaks with the code above because the renderer has references to the objects materials, textures and geometries. A complete clean of the scene is more complicated and there are plenty other questions that goes in to more detail:

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

Three.js Collada - What's the proper way to dispose() and release memory (garbage collection)?

Three.js Collada - 处理()和释放内存(垃圾收集)的正确方法是什么?

THREE js proper removing object from scene (still reserved in HEAP) https://github.com/mrdoob/three.js/issues/5175

三个js正确删除场景中的对象(仍然在HEAP中保留)https://github.com/mrdoob/three.js/issues/5175

Deallocating heap objects when removing mesh from scene

从场景中删除网格时释放堆对象

#2

Traversing all children and call dispose on their geometry, material and texture. The code below is my solution.

遍历所有孩子,并呼吁处理他们的几何,材料和纹理。下面的代码是我的解决方案。

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) obj.material.dispose()
  if(obj.texture) obj.texture.dispose()
}   

clearThree(scene)

#3

I have a more concise way of doing this. I noticed that the remove method of Object3D accepts more than one parameter for object removal. This allows us to use the entire children array by modifying the call to use each element as individual parameters by taking advantage of the built-in apply method for functions. This works like so:

我有一个更简洁的方法来做到这一点。我注意到Object3D的remove方法接受了多个用于删除对象的参数。这允许我们通过修改调用来使用整个子数组,以通过利用函数的内置apply方法将每个元素用作单独的参数。这样工作如下:

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

#1