HTMLImageElement not found (404)

Question

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 GET /[object%20HTMLImageElement] HTTP/1.1" 404 -, 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!

Here is the code as it stands:

// **************************
// 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 >= 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
};

Answer 1

The problem is here:

var element1 = THREE.ImageUtils.loadTexture(images.dresser10);

loadTexture() expects an URL, but images is an object containing properties of type Image (which actually is another name for HTMLImageElement). As the function expects an string and receives and object, Javascript calls the toString() method. By default, this method returns the class of the object, that's why your browser is trying to download /[HTMLImageElement], which obviously doesn't exist. Change your line to

var element1 = THREE.ImageUtils.loadTexture(images.dresser10.src);

and it should work fine.