title: Three js memory leak on CubeTextureLoader .load
body: <p>I am developing a simple web app with three js and struggling with memory leak problem that I reproduce in Firefox but not in Chrome. In mobile browser is reproduced again.</p>
  
  <p>My script creates a renderer (WebGlRenderer) an scene and a Perspective camera. Then I create a CubeTexture loader which I use to load the images of the a cube mesh (global var) and I add it to the scene.</p>
  
  <p>I have a slider in order to navigate withing scenes. In each navigation (slider item click) I call the loader.load function passing to it the urls of the images of the new cube to load. Inside it I just only create a material and I update the cube mesh material.</p>
  
  <p>Example of the script:</p>
  
  <pre><code>var renderer = new THREE.WebGLRenderer({antialias: false});
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth /     window.innerHeight, 0.1, 10000);
  
  // Cube mesh. The material of this mesh will be updated every time users clicks an item of slider
  var cubeMesh = null;
  
  var loader = new THREE.CubeTextureLoader();
  
  // This function is called when users clicks an slider item. Here there is something making the memory grow on every call
  function onSliderItemClick(urls) {
  
      skyCube = loader.load(
              urls,
              // On texture created
              function (texture) {
                  var shader = THREE.ShaderLib["cube"];
                      shader.uniforms["tCube"].value = texture;
  
                      var material = new THREE.ShaderMaterial({
                          fragmentShader: shader.fragmentShader,
                              vertexShader: shader.vertexShader,
                              uniforms: shader.uniforms,
                              depthWrite: false,
                              side: THREE.BackSide
  
                      });
                      var geometry = new THREE.BoxGeometry(100, 100, 100);
                      if (!cubeMesh) {
                          cubeMesh = new THREE.Mesh(geometry, material);
                              cubeMesh.position.set(0, controls.userHeight, 0);
                              // Add the inital cube mesh to the scene. Next imes this cube is already
                              // on the scene so we only update its material
                              scene.add(cubeMesh);
                      } else {
                              // We update the material of the cube mesh. Here memory increases. Old material still in memory?
                              cubeMesh.material = material;
                      }
  
  
              },
              // When loading
              function (xhr) {
                  console.log((xhr.loaded / xhr.total * 100) + '% loaded');
              },
          // On error
          function (xhr) {
          console.log('An error happened');
              }
        );
  </code></pre>
  
  <p>}</p>
  
  <p>Every time I call the loader.load function and I update the material of the cube mesh the memory usage increases as constant. Finally when I have updated the material several times (clicking on slider items several times) then the memory usage is so hight that the O.S directly closes Firefox.</p>
  
  <p>Any ideas on what could I do, see or try in order to update the material of the cube mesh being sure that non wanted objects are cleaned from memory?</p>
  
  <p>Thanks a lot</p>