HTMLImageElement not found（404）

Question

我正在用Three.js編寫JavaScript動畫循環模塊的初稿。現在我掛在所有圖像似乎加載的地方，但然後我得到一個控制檯錯誤，說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); 

它應該工作正常。