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);
/// 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.
Where is the problem, did THREE.js making some other references?
THREE.js R73
EDIT: 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.