After successfully rendering the model, rotating and zooming work perfectly. However, when attempting to clear the scene by clicking the button#clear, issues arise.
The expectation is to traverse through the scene, add its children to an array, iterate over the array, clear each item by calling dispose() on geometries or materials, and then remove the meshes from the scene.
<html>
<head>
<title>Three.js</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<button id="clear">Clear Three Out</button>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/ObjectLoader.js"></script>
<script>
...
(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};... };
... scene.add( object );
... }
);
scene.translateY(-345);
var holder = [];
document.getElementById('clear').onclick = function() {
console.log('holder before clean: ', holder);
for (var i = 0; i < holder.length; i++) { }
scene.remove(holder[i]);
}
console.log('holder after clean: ', holder);
}
...
bowLoop();
</script>
</body>
</html>
Console logs:
Children of the scene
...
Holder array before cleaning:
...
Holder array after cleaning:
...
No memory change as objects remain in heap.