Loading progress of multiple models with LoadingManager

Questions
1

Hello everyone,

How do I get a progress of loading multiple models as a single progress?

My code:

const loadingManager = new THREE.LoadingManager();
const gltfLoader = new GLTFLoader(loadingManager);

const bodyMesh = await new Promise(resolve => {
    gltfLoader.load(body, gltf => {
      resolve(gltf);
    });
  });

gltfLoader.load(stand, gltf => {
      scene.add(gltf.scene);
      gltf.scene.rotateY(45);
    });

gltfLoader.load(animationPath, gltf => {
      mixer = new THREE.AnimationMixer(bodyMesh.scene);
      let clip = new THREE.AnimationClip.findByName(gltf.animations, animationName);
      let action = mixer.clipAction(clip);
      action.play();
      scene.add(bodyMesh.scene);
    });

But these above gives me progress of each models.

2

Your line of code just creates an instance of LoadingManager. You now have to ensure to pass it to all loaders you are going to create. You can then implement the callbacks of LoadingManager in order to get notifications about the loading process. The respective documentation page shows a complete code example:

https://threejs.org/docs/index.html#api/en/loaders/managers/LoadingManager

3

I misscliсked and submitted only first line of code. Check out the updated version of it, please.

4

When using LoadingManager.onProgress(), the progress represents the number of loaded files and not the amount of downloaded data. So for example if you download three models you can implement the steps: 0/3, 1/3, 2/3, 3/3.

5 
manager.onProgress = async (url, loaded, total) => {
      let progress = loaded / total * 100;
      console.log('progress: ', progress);
};

Code above gives me something like this:

progress: 10
progress: 45
progress: 52
progress: 78
progress: 94
progress: 100
progress: 38
progress: 41
progress: 56
progress: 66
progress: 60
progress: 60
progress: 88
progress: 92
progress: 84
progress: 96
progress: 100
6

The outcome of the onProgress callback depends on when the loading progress is started for all items. If it the app inits the loading gradually, you won’t get the intended result. In this case, it’s probably better to track the progress manually.