LoadingManager: how to get full assets count before load

Hi, when using threejs LoadingManager and loading different assets, say for example a cube texture and a gltf model, I noticed that the onprogress function gives initially a wrong count of the assets (it initially counts only the textures for the cube texture, and then add the count only for the gltf model).

For example:

   const manager = new T.LoadingManager()

    manager.onLoad = function ( ) {
        console.log( "Loading complete!")
    }


    manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
        console.log(`Items loaded: ${itemsLoaded}/${itemsTotal}`)
    }

    manager.onError = function ( url ) {
        console.log( 'There was an error loading ' + url )
    }

const cubeTextureLoader = new T.CubeTextureLoader(manager)
const gltfLoader = new T.GLTFLoader(manager)

gltfLoader.load("model.gltf")

cubeTextureLoader.load([
            "Left.png",
            "Right.png",
            "Up.png",
            "Down.png",
            "Front.png",
            "Back.png",
        ])

I can observe the following output in the console:

Items loaded: 1/8
Items loaded: 2/8
Items loaded: 3/8
Items loaded: 4/8
Items loaded: 5/8
Items loaded: 6/8
Items loaded: 7/8
Items loaded: 8/21
Items loaded: 9/21
Items loaded: 10/21
Items loaded: 11/21
Items loaded: 12/21
Items loaded: 13/21
Items loaded: 14/21
Items loaded: 15/21
Items loaded: 16/21
Items loaded: 17/21
Items loaded: 18/21
Items loaded: 19/21
Items loaded: 21/21
Items loaded: 21/21
Loading complete!

As you can see the initial count of the manager is related only to the cube texture (8 textures), then it has been updated as soon as the GLTFLoader has parsed the model file and updated the count in the manager.

I would ask if there is a way to get the full count of assets before starting to load them. The objective would be to have a realistic progress bar (or something similar) that shows the loading status.

1 Like

When you load a .gltf file (the JSON manifest), you can’t know how many files are referenced by the asset at the beginning of the loading process. Consider to convert your glTF to a glb in order to avoid this situation.

BTW: When using one of the progress/loading indicators from this post, it’s not necessary to know the total file count in advance. The indicators don’t need the information about the total file count in order to provide an appropriate visual feedback.

Hi @Mugen87, my file is already in glb format but I got the same behavior on loading

Um, I thought it would behave differently :thinking:

Are we talking about multiple models, or just one?

A GLB will have textures embedded in it, but those textures are still “requested” via Blob URLs - not actually over the network, but still appearing in the progress events I think. I think you’ll have to know up front what you’re loading, to have a proper loading bar.

Hi @donmccurdy, I have a whole scene in a single glb file. I guess I have to count up front as you suggested :stuck_out_tongue_winking_eye:

Oh, if it’s all one file I don’t think LoadingManager is going to help you. The first “file” (the only real network request) will take all of the actual network time, the rest (blob URL requests) should be nearly instant. The onProgress event from the loader might give better information? Or you can load that file some other way and then call loader.parse( ... ) on it.

Hi, @donmccurdy, @Mugen87. I couldn’t understand these answers. I am facing the same problem where I couldn’t display a proper loading indicator. In my case, total percent of loader is going far from 100%.


I’m using three-react-fiber which I believe very similar Three.js itself.
Here’s my LoadingManager component

Then I injected it inside my Scene like this

How Can I display proper loading indicator in my case?

1 Like