Three JS: get progress of multiple file load

Question

I am new to Three JS.

What i am trying to do here is to create a loading screen which should show the progress of assets being loaded required for a scene.

I have multiple type of assets (7 files in total) e.g. -

1. 4 GLB files
2. 2 Texture files
3. And 1 Obj file

Now from the Three JS docs i can load file like the following (Obviously i will need different loaders based on file type) -

const gltfLoder: EThree.GLTFLoader = new Three.GLTFLoader(this.loadingManager);
            gltfLoder.load("/res/three/models/gltf/multiple/cat.glb", (glb: Three.GLTF) => {
                console.log("THREE >> GLB Loaded ", glb);
            }, (xhr: any) => {
console.log ("loading progress >> " + xhr.loaded);
}

This will give me progress of a single file, is there a solution where I can get load progress of all files? i.e. the 100% progress should be when all 7 files are loaded.

Thanks in advance

Answer 1

LoadingManager has onProgress. eg

this.loadingManager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
    console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};

There is also onStart, onLoad, onError.

LoadingManager reference