Is there a way to have a function trigger when a variable changes its value? In the code snippet provided, there is a function called loadImage that fetches the image material. However, if this code is executed, the declaration of mesh and scene.add(mesh) will occur before the image is fully loaded. Is there a method to ensure that the variable finishes loading before proceeding with other commands? Thank you for your help! ^u^
var geometry = new THREE.BoxGeometry(1, 1, 1);
var materialimg = new THREE.MeshBasicMaterial();
var materialimg = loadImage("test/map.jpg", manager);
var mesh = new THREE.Mesh(geometry, materialimg);
scene.add(mesh);
Here is the defined LoadImage function:
function loadImage(imagePath, loadingManager){
var loader = new THREE.ImageLoader(loadingManager);
// Create a texture
var texture = new THREE.Texture();
loader.load(imagePath, function(image){
texture.image = image;
texture.needsUpdate = true;
var material = new THREE.MeshBasicMaterial();
material.map = texture;
return material;
});
}
This is how the testImage function, which calls the LoadImage function, looks like:
function testImage(){
var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total){
console.log(item, loaded, total);
}
var geometry = new THREE.BoxGeometry(1, 1, 1);
var materialimg = new THREE.MeshBasicMaterial();
var materialimg = loadImage("test/map.jpg", manager);
var mesh = new THREE.Mesh(geometry, materialimg);
scene.add(mesh);
}