我正在使用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
};
答案 0 :(得分：3)
问题在于：
var element1 = THREE.ImageUtils.loadTexture(images.dresser10);
loadTexture()需要一个URL，但images是一个包含Image类型属性的对象（实际上是HTMLImageElement的另一个名称）。由于函数需要字符串以及接收和对象，因此Javascript调用toString()方法。默认情况下，此方法返回对象的类，这就是您的浏览器尝试下载/[HTMLImageElement]的原因，这显然不存在。将您的行更改为
var element1 = THREE.ImageUtils.loadTexture(images.dresser10.src);
它应该可以正常工作。