javascript - 未找到 HTMLImageElement (404)

Question

我正在使用 Three.js 用 Ja​​vaScript 编写动画循环模块的初稿。现在我卡在所有图像似乎都已加载的位置，但随后我收到一个控制台错误，显示 GET/[object%20HTMLImageElement] HTTP/1.1"404 -，所以我假设将图像放入 DOM 的过程中发生了一些困惑，但我花了很长时间才弄清楚是什么。提前感谢您的帮助!

下面是代码:

// **************************
// 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

问题出在这里:

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

loadTexture()需要一个 URL，但是 images是一个包含 Image 类型属性的对象(实际上是 HTMLImageElement 的另一个名称)。由于该函数需要一个字符串并接收对象，因此 Javascript 调用 toString()方法。默认情况下，此方法返回对象的类，这就是您的浏览器尝试下载 /[HTMLImageElement] 的原因。 ，这显然不存在。将您的线路更改为

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

它应该可以正常工作。