变量变化回调

Question

有没有办法在变量改变时声明一个函数？在下面的代码中，我声明了一个名为 loadImage 的函数，它 returns 图像的 material。但是，如果此代码运行s，mesh 和 scene.add(mesh) 的声明将在图像加载之前运行s。有没有办法在其他命令运行之前等待变量完成加载？谢谢！ ^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);

作为参考，这里是 LoadImage 函数：

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.needsUpadte = true;
    var material = new THREE.MeshBasicMaterial();
    material.map = texture;

    return material;
});   
}

这里是调用LoadImage函数的完整函数：

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);
}

Answer 1

你应该使用这样的回调函数：

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;
    });   

    return new THREE.MeshBasicMaterial({ map: texture, overdraw: true });
} 

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 = loadImage("test/map.jpg", manager);

    var mesh = new THREE.Mesh(geometry, materialimg);
    scene.add(mesh);
}

编辑：修改以上代码。请注意，您不能在回调函数中使用 return，因为它会在其他上下文中执行。

变量变化回调

Variable Change callback

javascript

three.js