Использовать переменные одной функции в другой (Три. js) Javascript

Question

Я загрузил файл obj, используя три. js Я попытался получить его позицию вершины 'X' и сохранить ее в 'pos' внутри функции objloader, которая находится в функции init (). Я хочу использовать значение переменной в другой функции, скажем 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 как a THREE.OBJLoader
   2. Определение обратного вызова для objLoader.load
   3. Вызов objLoader.load <- это асинхронно и может занять некоторое время </strong>
   4. init выходит , поскольку вызов objloader.load был последовательным с обратным вызовом
5. Вызов displaypos
   1. Печать undefined на console

Через несколько секунд ...

1. Обратный вызов для objloader.load называется
   1. Добавить object к scene
   2. Установить значение pos
   3. console.log выводит правильное значение на консоль

Таким образом, ваш displaypos вызов не печатает значение, потому что нет значения val Вы можете напечатать ... пока.

Вы можете добавить свой собственный обратный вызов к 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
})();