等待加载完成

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.

Answer 1

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

    //

} );