title: canceling loading an object into a scene in THREE.js
body: <p>So I have a THREE.js scene in which I have to cancel uploading a file to a scene. In my page I can upload multiple possible files, but I'm trying to set it up so that you can only upload one at a time for viewing in the scene. I'm using angular to implement my three js scene and canvas as essentially a factory, since i only want one instance of a canvas at a time. Here is the essential code of that factory (for this particular question) I'm using Angular by the way, which is the reason for the app.factory at the beginning and the injection of PartLibrary, but this isn't relevant. All you need to know is that PartLibrary.load_part_stl() is just a function that makes an ajax call to get the url for the stl file to be loaded ::</p>
  
  <pre><code>app.factory('ModelViewer', ['PartLibrary', function(QuoteLibrary){
      var modelViewer = {
          model_material: {},
          part_model: {},
          part: {}, 
          scene: {},
          camera: {},
          renderer: {},
          loader: {},
          manager: {},
          id: {}
      };
  
      modelViewer.destroy_old = function(canvas_selector){
          cancelAnimationFrame(this.id);
          this.scene = null;
          this.renderer = null;
          this.camera = null;
          this.part_edges = null;
          this.part_model = null;
          this.loader = null;
          this.manager = null;
          $('canvas').remove();
      }
  
      modelViewer.init = function(part, canvas_selector){
          var self = this;
  
  
          // distroy any old three js canvases
          self.destroy_old(canvas_selector);
  
          self.part = part;
          self.initiated = true;
          var container = $(canvas_selector)[0];
          self.scene = new THREE.Scene();
          self.camera = new THREE.PerspectiveCamera( 45, $(canvas_selector).width()/$(canvas_selector).height(), 1, 20000 );
          self.scene.add( new THREE.AmbientLight( 0x4F4F4F ) );
  
  
          self.renderer = new THREE.WebGLRenderer( { antialias: true } );
          container.appendChild( self.renderer.domElement );
  
          PartLibrary.load_part_stl(part.id)
              .success(function(url){
                  loadModel(url, self);
              })
              .error(function(){
                  console.log("Error loading STL file for 3D view");
              });
  
          function loadModel(url){
  
              self.manager = new THREE.LoadingManager();
              self.loader = new THREE.STLLoader(self.manager);
  
              self.manager.onLoad = function(item, loaded, total){
                  $('.model-loading').hide();
              }
  
              self.loader.load(url, function(geometry){
                  self.model_material = new THREE.MeshPhongMaterial();
                  self.part_model = new THREE.Mesh( geometry, self.model_material );
  
                  self.scene.add( self.part_model );
              });
          }
  
          function animate() {
              self.id = requestAnimationFrame( animate );
              render();
          }
  
          function render() {
              // var timer = Date.now() * 0.0005;
              self.renderer.render( self.scene, self.camera );
  
          }
          animate();
      }
  
      return modelViewer;
  }]);
  </code></pre>
  
  <p>So basically how it works is that there are multiple possible canvases (depending on the canvas_selector), but only one active canvas, as the old canvas/scene/renderer/etc... get destroyed every time a new model is initiated (hence the self.destroy_old at the beginning of the init function). </p>
  
  <p>If i wait for the object to load before creating a new scene it works as expected, so when a new scene is initiated only one part appears in the scene. However, if a scene is initiated, and then another scene is initiated while the old one is still loading that part, the new scene will load in both the new and the old part. This happens despite setting the loader, loadermanager, and part to null before creating new ones. </p>
  
  <p>So does anyone know how to stop the loader from loading a file into a scene while it is loading? </p>
  
  <p>I couldn't find any functions that seemed native to the loader or STLLoader (which inherits loader) in the documentation.</p>