javascript - 从场景中移除所有物体的正确方法

Question

我知道有很多这样的问题询问类似的事情，从场景中删除所有内容，但是我尝试过的所有内容都没有按照我希望的方式工作。似乎也没有一种明确的方法可以从场景中删除所有内容(在文档或类似的内容中)，因此我希望有人可以告诉我正确的方法。

下面是我当前用来从场景中删除所有内容的函数:

function removeAll() {
    while (scene.children.length > 0) {
        scene.remove(scene.children[0]);
        if (scene.children[0] == THREE.Mesh || scene.children[0] == THREE.Object3D || scene.children[0] == THREE.Group) {
            scene.children[0].dispose();
            scene.children[0].geometry.dispose();
            scene.children[0].material.dispose();
        }
    }
}

这很好，并且似乎从视觉上删除了场景中的所有内容。

我的问题是，如果我调用这个函数，然后重新调用创建场景的函数，或者创建新场景的函数(请参阅上下文部分，我有多个)，那么场景中的对象比第一次调用场景创建函数 (init()) 后的对象要多 - 使用控制台中的 renderer.info 检查。

我还注意到，在调用 removeAll() 函数然后重新加载场景后，我执行的次数越多，场景就越迟钝，我认为这是因为并非所有内容都被正确删除。

所以我问:

从场景中删除所有内容的正确方法是什么。

上下文:

我有一个 HTML 菜单，用户可以在其中选择他们想要“跳”到的场景。当他们执行此操作时，我需要删除所有内容，然后仅重新加载该特定场景的对象。我可以使用所有这些功能，唯一的问题是在新场景加载之前删除对象。

Answer 1

我看到的最重要的一点是，您只处理了顶级场景子项。如果这些对象本身有子对象，那么它们不一定会被正确处理。

老实说，确保清理所有内容的最佳方法就是处理渲染器并创建一个新渲染器并转储场景并让它被 GC 处理。

如果您想坚持尝试使用一种方法来清除所有内容，那么您需要递归到子级并处理它们可能具有的任何几何图形、 Material 和纹理。

您可以在this中找到非常全面的dispose函数。相关帖子。我要对其进行的唯一更改是修改 diposeHierarchy 以将对象彼此分离，如下所示:

function disposeHierarchy (node, callback)
{
    for (var i = node.children.length - 1; i >= 0; i--)
    {
        var child = node.children[i];
        disposeHierarchy (child, callback);
        callback (child);
        node.remove(child);
    }
}