在另一个函数中使用一个函数的变量 (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);

承诺 + async/await

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