javascript - THREE js proper removing object from scene (still reserved in HEAP) -

what proper way remove mesh form scene? in 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 integrated in function memory cleaned     }         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 = 0;       while (i < r) {         add();         i++;         if( r === ) console.log(r+' finnished ');       }     }  makeexperiment(50); 

/// after mannualy set clean();

meshes not visible @ scene anymore, expected, sill using memory, after time finish memory leak , browser crash.

where problem, did three.js making other references?

three.js r73

edit: when clean(); integrated in function (commented in code) memory cleaned properly. when set clean(); manually after makeexperiment(); done, memory not set free.

i've done few experiments , think there nothing wrong code. 1 thing i've learned though, that garbage collector might not run when think does. in case, wrapped code in iife (good practice not necessary in case) , expected heap cleared function finished running , went out of scope. took time clear:

so thought, okey, thats not good, if creating more objects in timespan garbage collector lingering, 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(); 

and happened:

the garbage collector seems doing job, , deleting them correctly purpose. however, using three.js renderer aswell, , if understand correctly, renderer keeps references materials, geometries , textures. if these not disposed of correctly, not garbage collected. three.js has method geometrys, materials , textures called .dispose() notify renderer remove aswell. how change clean() function:

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