DREI js richtig Entfernen von Objekt aus Szene (immer noch in HEAP reserviert)

Question

Was ist der richtige Weg, um Mesh Form Szene zu entfernen? In diesem Beispiel:

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); 

/// danach i mannualy clean(); gesetzt

Maschen in Szene nicht mehr sichtbar sind, wie erwartet, aber Schweller Speicher verwendet, die nach einiger Zeit fertig mit Speicherleck und Browser-Absturz.

Wo ist das Problem, hat THREE.js einige andere Referenzen gemacht?

Three.js R73

EDIT: clean(); wenn in Funktion (kommentierten nun in Code) -Speicher integriert ist richtig gereinigt. Aber wenn ich clean(); manuell nach makeExperiment(); eingestellt habe, wird der Speicher nicht als frei gesetzt.

Answer 1

Ich habe ein paar Experimente gemacht und ich denke gibt es nichts wirklich falsch mit Ihrem Code. Eine Sache, die ich jedoch gelernt habe, ist, dass dieser Müllsammler möglicherweise nicht genau ausgeführt wird, wenn du denkst, dass dies der Fall ist. Nur für den Fall, ich wickelte Ihren Code in eine IIFE (gute Praxis, aber nicht notwendig in diesem Fall) und erwartet, dass der Heap gelöscht werden, sobald die Funktion ausgeführt wurde und ging aus dem Geltungsbereich. Aber es einige Zeit tatsächlich dauerte es deutlich zu:

Also dachte ich, okey, das ist nicht zu gut, was ist, wenn ich war mehr Objekte in diesem Zeitraum schaffen, in dem der Garbage Collector nur verweilen, so ich tat:

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

und das ist, was passiert ist:

Der Müll c ollector scheint seine Aufgabe zu erledigen, und Sie löschen sie für diesen Zweck korrekt. Allerdings, Sie verwenden wahrscheinlich auch THREE.js Renderer, und wenn ich es richtig verstehe, behält der Renderer Verweise auf Materialien, Geometrien und Texturen. Also, wenn diese nicht richtig entsorgt werden, werden sie nicht Müll gesammelt. THREE.js hat eine Methode für Geometry s, Material s und Texture s genannt .dispose(), die den Renderer benachrichtigt, um es auch zu entfernen. Das ist also, wie ich Ihre clean() Funktion ändern:

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