Below is a snippet of code taken from a THREE.JS example that functions properly. I have used this code to create my own art gallery by reverse engineering it from the three.js code. However, I am puzzled by how materialPainting1 can be utilized in the callback function before it is fully defined. Even though it works flawlessly in the example, in my own code I have resorted to using a fiddle to successfully load the painting.
I would greatly appreciate it if someone could clarify how this mechanism works. How is materialPainting1 being used in the callback function even though it is defined afterward? The code functions well in the example, but in my own implementation, I encountered difficulties loading the painting.
var callbackPainting = function () {
var image = texturePainting1.image;
texturePainting2.image = image;
texturePainting2.needsUpdate = true;
scene1.add(meshCanvas1);
scene2.add(meshCanvas2);
var geometry = new THREE.PlaneGeometry(100, 100);
var mesh1 = new THREE.Mesh(geometry, materialPainting1);
var mesh2 = new THREE.Mesh(geometry, materialPainting2);
addPainting(scene1, mesh1);
addPainting(scene2, mesh2);
function addPainting(zscene, zmesh) {
zmesh.scale.x = image.width / 100;
zmesh.scale.y = image.height / 100;
zscene.add(zmesh);
var meshFrame = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
color: 0x000000,
polygonOffset: true,
polygonOffsetFactor: 1,
polygonOffsetUnits: 5
}));
meshFrame.scale.x = 1.1 * image.width / 100;
meshFrame.scale.y = 1.1 * image.height / 100;
zscene.add(meshFrame);
var meshShadow = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
color: 0x000000,
opacity: 0.75,
transparent: true
}));
meshShadow.position.y = -1.1 * image.height / 2;
meshShadow.position.z = -1.1 * image.height / 2;
meshShadow.rotation.x = -Math.PI / 2;
meshShadow.scale.x = 1.1 * image.width / 100;
meshShadow.scale.y = 1.1 * image.height / 100;
zscene.add(meshShadow);
var floorHeight = -1.117 * image.height / 2;
meshCanvas1.position.y = meshCanvas2.position.y = floorHeight;
}
};
var texturePainting1 = THREE.ImageUtils.loadTexture("textures/758px-Canestra_di_frutta_(Caravaggio).jpg", THREE.UVMapping, callbackPainting),
texturePainting2 = new THREE.Texture(),
materialPainting1 = new THREE.MeshBasicMaterial({
color: 0xffffff,
map: texturePainting1
}),
materialPainting2 = new THREE.MeshBasicMaterial({
color: 0xffccaa,
map: texturePainting2
});