在另一个（Three.js）Javascript中使用一个函数的变量

Question

我使用 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' 的变量值在整个程序中可用..

Answer 1

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

你说你打电话给init，紧接着是displaypos。这些函数调用是连续的，所以displaypos 将在init 退出后立即调用。

这里的操作顺序是：

1. 创建全局变量pos
2. 定义init函数
3. 定义displaypos函数
4. 致电init
   1. 将objloader 定义为THREE.OBJLoader
   2. 定义objLoader.load的回调
   3. 调用objLoader.load
   4. init 退出 因为对 objloader.load 的调用是连续调用的
5. 致电displaypos
   1. 将undefined 打印到控制台

几秒钟后……

1. objloader.load 的回调被调用
   1. 将object 添加到scene
   2. 设置pos的值
   3. 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
})();