Wait until loading is completed

Question

Hi guys iam kind of stuck right now.

My Problem is that iam back at my starting point before all of my Objects are loaded.

After the creation of my shelf i calculate a boundingBox that i need to calculate the Position and the translation of my Object. But because iam back to early i cant calculate my bounding box and it says everything is 0 or infinity. So i kind of need a way to wait until everything is loaded. i Thought that the onload part on the loader does that but it doesnt work.

Here are the relevant parts of my code:

in my init i call one function

let shelf = this.creators.createShelf(parts);

My Creator Class builds a Object

createShelf(parts) {

  let shelf= new THREE.Mesh();
  let mesh: THREE.Mesh;
  let props;
  for (let part of parts) {
    if (part.model == true) {
      let loadObject = this.helpers.loadObject(part);
      shelf.add(loadObject);
      // do stuff
      return shelf;

Now i load a 3d Object i created with the ObjectLoader of ThreeJS

 loadObject(props: Object3D) {

    let object = new THREE.Mesh();
    let modelLoader = new THREE.ObjectLoader();
    modelLoader.load(part.modelObjPath,
        // onload
        function (obj) {
            // do stuff to the Object
            object.add(obj);  
        },
        function (xhr) {
            console.log( (xhr.loaded / xhr.total * 100) + '% ' + part.name + ' loaded' );
        },
        function (xhr) {
            console.error( 'An error happened' );
        }
    );
    return object;
}

my bounding box createt either with Box3 or a BoxHelper returns this:

let box = new THREE.Box3().setFromObject(shelf);

bb object 
Ta {min: p, max: p}
max:
p {x: -Infinity, y: -Infinity, z: -Infinity}
min:
p {x: Infinity, y: -Infinity, z: -Infinity}

i hope i could explain where iam stuck.

Thanks for looking into it.

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jared Smith, Jun 07 '18 at 14:04
You'll have to use a callback in `modelLoader.load`'s `onload`. Or use a Promise: `return new Promise(res => objectLoader.load(obj => { object.add(obj); res(obj); }));` — Jared Smith, Jun 07 '18 at 14:05
How do i implement a callback on load, could you please give me a example ? Iam kind of to stupid right now and just dont get it — EnginO, Jun 07 '18 at 14:10
This isn't a quick fix kind of situation or I'd just answer your question, you're going to have to go back and learn how to handle asynchronous operations in JavaScript (and in general). The linked dupe is a good place to start but googling 'promises vs callbacks' should help too. — Jared Smith, Jun 07 '18 at 14:14

score 0 · Answer 1 · answered Jun 07 '18 at 17:54

The docs have the answer already: https://threejs.org/docs/#api/loaders/managers/LoadingManager

You can pass in the manager to as many items as you need making this a handy class for waiting for all your objects and items to load before manipulating your scene and assets. You then specify actions you'd like to take during start, progress, and onLoad. onLoad fires when all the items that have the manager passed in have loaded.

var manager = new THREE.LoadingManager();
manager.onStart = function ( url, itemsLoaded, itemsTotal ) {

    console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );

};

manager.onLoad = function ( ) {

    console.log( 'Loading complete!');

};


manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {

    console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );

};

manager.onError = function ( url ) {

    console.log( 'There was an error loading ' + url );

};

var loader = new THREE.OBJLoader( manager );
loader.load( 'file.obj', function ( object ) {

    //

} );

Wait until loading is completed

1 Answers1