三个js正确从场景中删除对象（仍然在HEAP中保留） [英] THREE js proper removing object from scene (still reserved in HEAP)

问题描述

删除网格表单场景的正确方法是什么？
在此示例中：

What is the proper way to remove mesh form scene? In this example:

    removable_items = [];
    box = new THREE.Object3D();
    scene.add(box);

    function add() {
        var mesh = new THREE.Mesh( new THREE.IcosahedronGeometry( 10, 5 ), new THREE.MeshPhongMaterial( {color: 0xFFFFFF}) );   
        box.add( mesh );
        removable_items.push(mesh);
        //clean(); ///// when is integrated in function memory is cleaned properly
    }   

    function clean() {
          if( removable_items.length > 0 ) {
            removable_items.forEach(function(v,i) {
               v.parent.remove(v);
            });
            removable_items = null;
            removable_items = [];
          }
    }

    function makeExperiment(r) {
      var i = 0;
      while (i < r) {
        add();
        i++;
        if( r === i ) console.log(r+' finnished ');
      }
    }

makeExperiment(50);

///之后我mannualy设置 clean（）;

/// after that i mannualy set clean();

网格在场景中不再可见，正如预期的那样，但是使用内存，在一段时间内完成内存泄漏和浏览器崩溃。

meshes are not visible at scene anymore, as expected, but sill using memory, which after some time finish with memory leak and browser crash.

问题出在哪里，THREE.js做了其他一些参考吗？

Where is the problem, did THREE.js making some other references?

THREE.js R73

THREE.js R73

编辑：何时 clean（）; 集成在函数中（现在在代码中注释）内存已正确清理。但是当我在 makeExperiment（）; 完成后手动设置 clean（）; 时，内存未设置为空闲。

when is clean(); integrated in function (commented now in code) memory is cleaned properly. But when I set clean(); manually after makeExperiment(); is done, memory is not set as free.

推荐答案

我做了一些实验，我强烈认为没有什么真的你的代码错了。我学到的一件事是，垃圾收集器可能无法在您认为的情况下完全运行。为了以防万一，我将您的代码包装在IIFE中（良好实践，但在这种情况下不是必需的）并且期望在函数完成运行并且超出范围后立即清除堆。但它实际上需要一些时间才能清除：

I've done a few experiments and i think there is nothing really wrong with your code. One thing that i've learned though, is that that garbage collector might not run exactly when you think it does. Just in case, I wrapped your code in a IIFE (good practice but not necessary in this case) and expected the heap to be cleared as soon as the function finished running and went out of scope. But it actually took some time for it to clear:

所以我想，好吧，那不是很好，如果我在垃圾收集器只是挥之不去的那个时间盘内创造了更多的对象，那么我做了：

So i thought, okey, thats not to good, what if i was creating more objects in that timespan where the garbage collector is just lingering, so i did:

.
.
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();

这就是发生的事情：

垃圾收集器似乎正在执行其工作，并且您正在为此目的正确删除它们。 然而，您可能正在使用THREE.js渲染器，如果我理解正确，渲染器会保留对材质，几何和纹理的引用。因此，如果没有正确处理它们，它们将不会被垃圾收集。 THREE.js有一个方法 Geometry s， Material s和 Texture s名为 .dispose（），它将通知渲染器将其删除。所以这就是我如何更改你的 clean（）函数：

The garbage collector seems to be doing its job, and you are deleting them correctly for this purpose. However, You are probably using THREE.js Renderer aswell, and if I understand it correctly, the Renderer keeps references to materials, geometries and textures. So if these are not disposed of correctly, they will not be garbage collected. THREE.js has a method for Geometrys, Materials and Textures called .dispose() which will notify the Renderer to remove it aswell. So this is how I would change your clean() function:

removable_items.forEach(function(v,i) {
  v.material.dispose();
  v.geometry.dispose();
  box.remove(v);
});

这篇关于三个js正确从场景中删除对象（仍然在HEAP中保留）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！