title: How do I clear the memory properly in THREE.js
body: <p>I can get the model to render, I can rotate, and zoom and everything is good UNTIL, I try to clear the scene. I want to clear the scene by clicking the <code>button#clear</code>. </p>
  
  <p>I expect the scene to be traversed, and have its children added to an array. I then expect to iterate over the array and for each item in the array clear it out by calling <code>dispose()</code> on it if it's a geometry or a material and then remove the mesh from the scene.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Three.js&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/main.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;button id="clear"&gt;Clear Three Out&lt;/button&gt;
      &lt;script src="js/three.js"&gt;&lt;/script&gt;
      &lt;script src="js/OrbitControls.js"&gt;&lt;/script&gt;
      &lt;script src="js/ObjectLoader.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      &lt;script&gt;
        (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)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})();
        var scene = new THREE.Scene();
  
        var width = window.innerWidth;
        var height = window.innerHeight;
        var camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, -1000, 1000); // new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  
        var blackReflectiveMaterial = new THREE.MeshBasicMaterial();     
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
  
        // handle resize event
        window.addEventListener( 'resize', function() {
          var width = window.innerWidth;
          var height = window.innerHeight;
  
          renderer.setSize(width, height);
          camera.aspect = width / height;
          camera.updateProjectionMatrix();
        } );
  
        // controls
        controls = new THREE.OrbitControls( camera, renderer.domElement );
        camera.position.z = 3;
  
        // model loader
        var loader = new THREE.ObjectLoader();
  
        loader.load(
          'models/revol-uv.json', // model of a compound bow
          function( object ) {
            console.log('object: ', object);
            object.scale.x = object.scale.y = object.scale.z = 200;
  
            object.traverse( function(child) {
              child.material = blackReflectiveMaterial;
            });
  
            scene.add( object );
          }
        );
  
        scene.translateY(-345);
  
        // array to hold Scene's children
        var holder = [];
  
        // when click the #clear button, call this function
        document.getElementById('clear').onclick = function() {
          scene.traverse( function ( child ) {
            if (child.type === "Mesh") {
              holder.push(child);
            }
  
          } );
          console.log('holder before clean: ', holder);
          for (var i = 0; i &lt; holder.length; i++) {
            if (holder[i].geometry) {
              holder[i].geometry.dispose();
            }
  
            console.log('holder[i].material: ', holder[i].material);
            if (holder[i].material) {
              if (holder[i].map) {
                holder[i].material.map.dispose();
              }
              holder[i].material.dispose();
            }
  
            console.log('holder[i]: ', holder[i]);
            scene.remove(holder[i]);
          }
          console.log('holder after clean: ', holder); // all the objects are still there
        }
  
        // logic
        var update = function() {
  
          // any code to rotate ... blah blah not important
        };
  
        // draw Scene
        var render = function() {
          renderer.render( scene, camera );
        };
  
        // run loop (update, render, repeat)
        var bowLoop = function() {
          requestAnimationFrame( bowLoop );
  
          update();
          render();
        };
        bowLoop();
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's the console logs:</p>
  
  <p><strong>The children of the scene</strong></p>
  
  <pre><code>Array(10)
  0:THREE.Mesh {uuid: "5574129D-7093-4567-8927-4F07BB7A3928", name: "cable-arm", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  1:THREE.Mesh {uuid: "ED867F5C-F6C4-45BC-BBF7-9DD5061A0CF6", name: "cams", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  2:THREE.Mesh {uuid: "D69C58BB-1E03-4D00-8050-6F2F4739DFE9", name: "handles", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  3:THREE.Mesh {uuid: "50A98720-4E8F-4873-B987-0C993D05FE65", name: "hardware", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  4:THREE.Mesh {uuid: "6CE44421-0614-40E9-8013-FE939CFA0191", name: "limb-pockets", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  5:THREE.Mesh {uuid: "60FF4521-B19B-477D-8223-8B4BFA2A0F5A", name: "limbs", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  6:THREE.Mesh {uuid: "D2980C91-0B19-4757-A831-A3B46546E579", name: "limbsavers", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  7:THREE.Mesh {uuid: "D9858B1C-E4F7-40C4-98DD-163230F9A917", name: "riser", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  8:THREE.Mesh {uuid: "BC7C199B-2867-4446-86FE-D244D7A32E07", name: "string-supressor", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  9:THREE.Mesh {uuid: "02A038E9-FB0B-43FF-B3F2-BCCAFD7E10AC", name: "strings", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  </code></pre>
  
  <p><strong>The holder array before the clean:</strong></p>
  
  <pre><code>Array(10)
  0:THREE.Mesh {uuid: "5574129D-7093-4567-8927-4F07BB7A3928", name: "cable-arm", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  1:THREE.Mesh {uuid: "ED867F5C-F6C4-45BC-BBF7-9DD5061A0CF6", name: "cams", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  2:THREE.Mesh {uuid: "D69C58BB-1E03-4D00-8050-6F2F4739DFE9", name: "handles", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  3:THREE.Mesh {uuid: "50A98720-4E8F-4873-B987-0C993D05FE65", name: "hardware", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  4:THREE.Mesh {uuid: "6CE44421-0614-40E9-8013-FE939CFA0191", name: "limb-pockets", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  5:THREE.Mesh {uuid: "60FF4521-B19B-477D-8223-8B4BFA2A0F5A", name: "limbs", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  6:THREE.Mesh {uuid: "D2980C91-0B19-4757-A831-A3B46546E579", name: "limbsavers", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  7:THREE.Mesh {uuid: "D9858B1C-E4F7-40C4-98DD-163230F9A917", name: "riser", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  8:THREE.Mesh {uuid: "BC7C199B-2867-4446-86FE-D244D7A32E07", name: "string-supressor", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  9:THREE.Mesh {uuid: "02A038E9-FB0B-43FF-B3F2-BCCAFD7E10AC", name: "strings", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  </code></pre>
  
  <p><strong>The holder array after the clean:</strong></p>
  
  <pre><code>Array(10)
  0:THREE.Mesh {uuid: "5574129D-7093-4567-8927-4F07BB7A3928", name: "cable-arm", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  1:THREE.Mesh {uuid: "ED867F5C-F6C4-45BC-BBF7-9DD5061A0CF6", name: "cams", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  2:THREE.Mesh {uuid: "D69C58BB-1E03-4D00-8050-6F2F4739DFE9", name: "handles", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  3:THREE.Mesh {uuid: "50A98720-4E8F-4873-B987-0C993D05FE65", name: "hardware", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  4:THREE.Mesh {uuid: "6CE44421-0614-40E9-8013-FE939CFA0191", name: "limb-pockets", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  5:THREE.Mesh {uuid: "60FF4521-B19B-477D-8223-8B4BFA2A0F5A", name: "limbs", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  6:THREE.Mesh {uuid: "D2980C91-0B19-4757-A831-A3B46546E579", name: "limbsavers", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  7:THREE.Mesh {uuid: "D9858B1C-E4F7-40C4-98DD-163230F9A917", name: "riser", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  8:THREE.Mesh {uuid: "BC7C199B-2867-4446-86FE-D244D7A32E07", name: "string-supressor", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  9:THREE.Mesh {uuid: "02A038E9-FB0B-43FF-B3F2-BCCAFD7E10AC", name: "strings", type: "Mesh", parent: T…E.Scene, children: Array(0), …}
  </code></pre>
  
  <p>No change in memory ... objects are still in heap.</p>