Unable to get object handle from GLTFLoader

Questions
1

I have created a simple function for loading an object to the given scene and to return the object that gets added to the scene:

const _THREEJSHELPER = {
  addObjectToScene: (scene, objString) => {
    let loader = new GLTFLoader();
    let obj = new THREE.Object3D(); // function seem to be returning this object for some reason

    loader.load(objString, function (gltf) {
      obj = gltf.scene;

      scene.add(obj);
    }, undefined, function (error) {
      console.error(error);
    });

    return obj;
  }
}

In the other js file when I am trying to use this function I am unable to get the actual object handle:

import _THREEJSHELPER from './src/threejs-helper';

let obj2 = _THREEJSHELPER.addObjectToScene(scene, 'models/object.glb');
obj2.position.x = 10;  //This does not work for the object that that gets added

Am I missing any JavaScript concepts here? Or there is something else wrong with this ?
Appreciate any response.

2

I tried following this older post but could not understand the problem with my code.

3

You can’t write your code in a synchronous style. The function addObjectToScene() returns the newly created instance of Object3D. The reference to this instance will not change just because you assign gltf.scene to the local obj variable.

You need code like this:

_THREEJSHELPER.addObjectToScene('models/object.glb', function( object ){

    scene.add( object );

} );

And the implementation of addObjectToScene() looks like so:

const _THREEJSHELPER = {
  addObjectToScene: (objString, onLoad) => {
    let loader = new GLTFLoader();
    loader.load(objString, function (gltf) {
      onLoad(gltf.scene);
    }, undefined, function (error) {
      console.error(error);
    });
  }
}

Or work with Promises instead.

4

@Mugen87 Appreciate your response!
I followed your suggestion of working with promises and could make things work using following:

const _THREEJSHELPER = {
  asyncModelLoader: (url) => {
    let loader = new GLTFLoader();

    return new Promise((resolve, reject) => {
      loader.load(url, data => resolve(data), null, reject);
    })
  }
}

Used it like this:

(async () => {
  let tempObject = await _THREEJSHELPER.asyncModelLoader('models/object.glb');
  obj2 = tempObject.scene;
  scene.add(obj2);
})();

Referred to this post.