javascript - 在另一个(Three.js)Javascript中使用一个函数的变量

我已经使用three.js加载了obj文件
我尝试获取其顶点“ X”的位置并将其保存在init（）函数中的objloader函数内部的“ pos”中。
我想在另一个函数中使用变量的值，例如displayposition（）
当我尝试

var pos;

function init() {
    var objLoader = new THREE.OBJLoader();
    objLoader.load('objectfile.obj', function(object) {
        scene.add(object);
        pos = scene.children[5].children[0].geometry.attributes.position.getX(0);
        console.log(pos); //This displays the vertex position value
    });
}

function displaypos() {
    console.log(pos); //It doesn't display the vertex position value
}

如何使它成为全局变量并使“ pos”的变量值在整个程序中可用。

最佳答案

OBJLoader.load是一个异步函数，它下载并解析OBJ文件。这可能根本不需要时间，也可能需要几秒钟。

您说您正在呼叫init，紧接着是displaypos。这些函数调用是顺序的，因此displaypos将在init退出后立即被调用。

操作顺序如下：


创建全局变量pos
定义init函数
定义displaypos函数
致电init


将objloader定义为THREE.OBJLoader
定义objLoader.load的回调
呼叫objLoader.load init退出是因为对objloader.load的调用是连续的并带有回调

致电displaypos


将undefined打印到控制台



几秒钟后...


objloader.load的回调称为


将object添加到scene
设置pos的值
console.log将正确的值输出到控制台



因此，您的displaypos调用未打印该值，因为还没有要打印的值...。

您可以将自己的回调添加到init以使其按预期工作，或者可以重新编写代码以使用Promise + async/await。

回调版本

var pos;

function init(callback) {
    var objLoader = new THREE.OBJLoader();
    objLoader.load('objectfile.obj', function(object) {
        scene.add(object);
        pos = scene.children[5].children[0].geometry.attributes.position.getX(0);
        console.log(pos); //This displays the vertex position value
        callback(); // The real exit point
    });
}

function displaypos() {
    console.log(pos);
}

init(function(){
    displaypos(); // will now display the correct value
});

// alternately: init(displaypos);

承诺+异步/等待

var pos;

async function init() {
    return new Promise(function(resolve){

        var objLoader = new THREE.OBJLoader();
        objLoader.load('objectfile.obj', function(object) {
            scene.add(object);
            pos = scene.children[5].children[0].geometry.attributes.position.getX(0);
            console.log(pos); //This displays the vertex position value
            resolve(); // the real exit point
        });

    });
}

function displaypos() {
    console.log(pos);
}

(async function(){
    await init();
    displaypos(); // will display the correct value
})();