Problems with logging the current progress of a loading process

Questions
#1

Hi guys,

when I try to log my “percentage loaded” it always instantly returns 100% instead of counting from 0% up and till 100%. Can anyone tell me why?

	function createModel(loader, scene, model = 'model/helmet/damagedHelmet.gltf')
{
	loader = new THREE.GLTFLoader();

	loader.load(model, function(gltf) {

		storedOriginalModel = gltf.scene;

		gltf.scene.traverse(function(child) {

			if (child.isMesh) {

				child.material.envMap = envMap;

			}

		});

		gltf.scene.name = 'model';

		scene.add( gltf.scene );

		gltf.animations; // Array<THREE.AnimationClip>
		gltf.scene; // THREE.Scene
		gltf.scenes; // Array<THREE.Scene>
		gltf.cameras; // Array<THREE.Camera>
		gltf.asset; // Object

	}, function(xhr) {

		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

	}, function(e) {

		console.error(e);

	});
}
#2

A more robust solution for logging the progress of a XHR request is:

if ( xhr.lengthComputable ) {

    console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );

}

If a web or content server does not set a Content-Length header in the response, xhr.lengthComputable is false since it’s impossible to compute the current amount of loaded data.

#3

Ahhhh never knew, thank you so much!

Besides that, still the same outcome haha. It still shows 100% instantly instead of showing me multiple logs e.g. 10% 20% et cetera up to 100%.

I want this because I want to make a “loading” bar so that you can visually see the progress of loading the model.

My code is here: https://www.mijnnaamisangelo.nl/new/

If you open your developer console you will see only one console log which says 100%.

#4

The thing is…the glTF file is so small that it is more or less instantly loaded. In order to keep track of all pending resources (like textures), use THREE.LoadingManager.

#5

Thanks for your reply!

Wish I was as smart as you haha you know everything ^^

Did that, didnt work quite well haha.

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

    console.log(itemsLoaded);
    console.log(itemsTotal);
};

First time it echo’s 1 / 3
All the times after that it says 2/8, 3/8, 4/8 et cetera. 8 is right but the first log is always wrong.

Is that my bad?

#6

Progress bars are hard. :slight_smile:

I think the problem above is that you initiate loading 3 files, but those files themselves reference other files. For example, glTF can reference .bin or texture files. The LoadingManager doesn’t know about those extra resources until the first resources have come back.

You can do some “hacks” when displaying the progress bar to make this look smooth. Or, consider packing your glTF and its resources into a single GLB: https://glb-packer.glitch.me/. That may still show some extra requests (used internally to parse embedded texture objects) but should be closer to what you’d expect.

glTF OnProgress fails to monitor .bin progress
#7

Ah no wonder hahaha… makes sense if they reference other files.
Ill do a small “work around” then, just never knew they could reference to other files within the glTF file.

Thanks for letting me know :slight_smile: