Use variable of one function in another (Three.js) Javascript

Question

I had loaded an obj file using three.js I tried acquring its vertex 'X' position and save it in 'pos' inside the objloader function which is in the init() function. I want to use the variable's value in another function say displayposition() when I try

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
}

How to make it global and make the variable value of 'pos' usable throughout the program..

Answer 1

OBJLoader.load is an asynchronous function that downloads and parses the OBJ file. This may take no time at all, or it may take several seconds.

You say you are calling init followed immediately by displaypos . These function calls are sequential, so displaypos will be called immediately after init exits.

The order of operations here goes:

1. Create the global variable pos
2. Define the init function
3. Define the displaypos function
4. Call init
   1. Define objloader as a THREE.OBJLoader
   2. Define the callback for objLoader.load
   3. Call objLoader.load <-- This is asynchronous and may take some time
   4. init exits because the call to objloader.load was sequential with a callback
5. Call displaypos
   1. Print undefined to the console

A few seconds later...

1. The callback for objloader.load is called
   1. Add object to scene
   2. Set the value of pos
   3. console.log prints the correct value to the console

So your displaypos call isn't printing the the value because there is no value to print... yet.

You can add your own callback to init to make this work how you expect, or you can re-write your code to use Promise + async / await .

Callback version

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

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