HTMLImageElement를 찾을 수 없습니다. (404)

Question

JavaScript로 Three.js의 애니메이션 루프 모듈 초안을 작성하고 있습니다. 지금은 모든 이미지가로드 될 것 같은 곳에 매달려 있지만, 콘솔 오류가 발생하면 GET /[object%20HTMLImageElement] HTTP/1.1" 404 -이 표시됩니다. 따라서 DOM에 이미지를 가져 오는 방법에 대해 생각해 볼 수는 있지만, 무엇을 알아 내는지 시간의 피클. 도와 주셔서 미리 감사드립니다. (실제로 어떤

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

loadTexture()이 URL을 기대하지만, images 유형 Image의 속성을 포함하는 객체입니다

이

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

문제는 여기에 있습니다 : 그것은 약자로 여기

코드입니다 HTMLImageElement의 다른 이름). 함수가 문자열을 기대하고 받기 및 객체이기 때문에 자바 스크립트는 toString() 메서드를 호출합니다. 기본적으로이 메서드는 객체 클래스를 반환하므로 브라우저가 분명히 존재하지 않는 /[HTMLImageElement]을 다운로드하려고합니다. 회선을

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

으로 변경하면 정상적으로 작동합니다.