I've implemented code from three.js examples successfully in a different location, but it's not working within a loop.
There seems to be something I'm overlooking as this is my third attempt at the code with no success.
It appears that the callback function is firing prematurely, resulting in an empty object.
The specific error message I'm encountering is "Uncaught TypeError: Cannot read property 'image' of undefined"... typical.
var images =
[ '01.jpg',
'02.jpg',
'03.jpg',
'04.jpg',
'05.jpg' ];
function loadImages(){
var callbackPainting = function(i) {
var texture = texturePainting[i];
console.log(texture); // this returns "undefined"
var image = texture.image;
var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
var mesh = new THREE.Mesh( geometry, materialPainting[i] );
addPainting( scene, mesh );
function addPainting( zscene, zmesh ) {
zmesh.scale.x = image.width / 100;
zmesh.scale.y = image.height / 100;
// I know this makes the images in the same location. Overlook
zmesh.position.set(0,0,0);
zscene.add( zmesh );
}
};
var texturePainting = {}
var materialPainting = {}
for(i in images){
image = "images/" + images[i];
texturePainting[i] = THREE.ImageUtils.loadTexture( image, THREE.UVMapping, callbackPainting(i) );
texturePainting[i].minFilter = THREE.LinearFilter;
materialPainting[i] = new THREE.MeshBasicMaterial( { map: texturePainting[i] } );
}
}