title: HTMLImageElement not found (404)
body: <p>I'm writing a first draft of an animation loop module in JavaScript with Three.js. Right now I'm hung up at a place where all the images seem to load, but then I get a console error that says <code>GET /[object%20HTMLImageElement] HTTP/1.1" 404 -</code>, so I assume something about getting the image into the DOM is messed up, but I'm having a pickle of a time figuring out what. Thanks in advance for your help!</p>
  
  <p>Here is the code as it stands:</p>
  
  <pre><code>// **************************
  // LOADING THE PROGRAM IMAGES
  // Does an asynchronous load of the program's images complete with callbacks to the related functions.
  // - Houses the array object of src urls
  
  function loadImages(callback) { // the callback is currently the init function that initializes the scene
  
      var sources = {
          // element images
          dresser10: 'static/img/side_small_dresser10.png',
          dresser14: 'static/img/side_small_dresser14.png',
          dresser17: 'static/img/side_small_dresser17.png',
          dresser19: 'static/img/side_small_dresser19.png',
          jones02: 'static/img/side_small_jones02.png',
          jones06: 'static/img/side_small_jones06.png',
          jones11: 'static/img/side_small_jones11.png',
          jones14: 'static/img/side_small_jones14.png',
          morris06: 'static/img/side_small_morris06.png',
          morris07: 'static/img/side_small_morris07.png',
          morris09: 'static/img/side_small_morris09.png',
          morris10: 'static/img/side_small_morris10.png'
      };
  
      var images = {};
      var loadedImages = 0; // counter for the number of images that have loaded
      var numImages = 0; // counter for the number of images to be loaded
      // get num of sources
      for (var src in sources) { // count up the number of images to be loaded from sources
          numImages++; 
      }
      for (var src in sources) { // for each source
          images[src] = new Image(); // declare it equal to new image object
          images[src].onload = function () { // for each image that loads
              if (++loadedImages &gt;= numImages) { // ask if all the images have loaded yet
                  callback(images); // if so, call the callback function that was passed as an arg
              }
          };
          images[src].src = sources[src]; // attach the image source to the image object
      }
  }
  
  
  // ************************
  // THE MAIN ANIMATION LOOP:
  
  var animLoop = (function () {
  
      // standard global variables, held privately in this module
      var container, scene, camera, renderer, controls, stats;
      var keyboard = new THREEx.KeyboardState();
      var clock = new THREE.Clock();
  
      ///////////
      // SCENE //
      ///////////
      scene = new THREE.Scene();
  
      ////////////
      // CAMERA //
      ////////////
  
      // set the view size in pixels (custom or according to window size)
      var SCREEN_WIDTH = 1920, SCREEN_HEIGHT = 1080;
      // var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;     
      // camera attributes
      var VIEW_ANGLE = 20, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
      // set up camera
      camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
      // add the camera to the scene
      scene.add(camera);
      // the camera defaults to position (0,0,0)
      //  so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin
      // (x,y,z)
      camera.position.set(0,150,1000);
      camera.lookAt(scene.position);  
  
      //////////////
      // RENDERER //
      //////////////
  
      // create and start the renderer; choose antialias setting.
      if (Detector.webgl)
          renderer = new THREE.WebGLRenderer( {antialias:true} );
      else
          renderer = new THREE.CanvasRenderer(); 
  
      renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  
      // attach div element to variable to contain the renderer
      container = document.getElementById( 'ThreeJS' );
  
      // attach renderer to the container div
      container.appendChild( renderer.domElement );
  
      ///////////
      // STATS //
      ///////////
  
      // displays current and past frames per second attained by scene
      stats = new Stats();
      stats.domElement.style.position = 'absolute';
      stats.domElement.style.bottom = '0px';
      stats.domElement.style.zIndex = 100;
      container.appendChild( stats.domElement );
  
      ///////////
      // LIGHT //
      ///////////
  
      // create a light
      var light = new THREE.PointLight(0xffffff);
      light.position.set(100,250,0);
      scene.add(light);
      var ambientLight = new THREE.AmbientLight(0x111111);
      // scene.add(ambientLight);
  
      ////////////
      // IMAGES //
      ////////////
  
      var images;
      var element1, element2, element1Material, sprite;   
  
  
      return { // returns an object full of functions with priviledged access to the private variables listed above
          setImages: function (images_) { // sets the value of the images (array) above
  
              images = images_; 
  
          },
          createSprites: function () { // creates the sprites once the images have been set
              var element1 = THREE.ImageUtils.loadTexture(images.dresser10);
              var element1Material = new THREE.SpriteMaterial( { map: element1, useScreenCoordinates: true, alignment: THREE.SpriteAlignment.topLeft  } );
              var sprite = new THREE.Sprite(element1Material);
              sprite.position.set( 50, 50, 0 );
              sprite.scale.set( 64, 64, 1.0 ); // imageWidth, imageHeight
              scene.add(sprite);  
          },
          update: function () { // updates the scene
  
              // delta = change in time since last call (in seconds)
              var delta = clock.getDelta();
  
              // functionality provided by THREEx.KeyboardState.js    
              if ( keyboard.pressed("z") ) 
              { 
                  // do something
              }
  
              // controls.update();
              stats.update();
          },
          render: function () { // renders the scene
  
              renderer.render(scene, camera);
  
          }
      };
  }());
  
  
  // ANIMATE the scene   
  function animate() {
          requestAnimationFrame( animate );
          console.log("checkpoint 3!");
          animLoop.render();
          console.log("checkpoint 4!");       
          animLoop.update();
          console.log("checkpoint 5!");
  };
  
  
  // *********************
  // INITIALIZES THE SCENE
  
  function init(images) { // `images` is passed by a callback from loadImages
  animLoop.setImages(images); // places the initial array of images as a private variable in the animLoop object    
      console.log("checkpoint 1!");
      animLoop.createSprites();
      console.log("checkpoint 2!");
      animate();      
  
  };
  
  
  // ********************************************************
  // CHECKS TO SEE IF THE WINDOW HAS LOADED BEFORE PROCEEDING
  // Once the window is loaded, calls the init function
  
  window.addEventListener ("load", eventWindowLoaded, false);
  function eventWindowLoaded() {
  
      loadImages(init); // calls to initialize the scene once the images are loaded
  };
  </code></pre>