How to create a loading bar using `LoadingManager()` and `onProgress` method?

Questions
1

I’m loading an FBX model with a LoadingManager and I think its onProgress method could be used to display a loading bar.

Any ideas how I could approach the creation of a loading bar with Three.js?

To give you a hull to work with this is what I’d use to start:

const manager = new LoadingManager();

manager.onProgress = function (url, loaded, total) {
  log.debug('Loading file: ' + url + '.\nLoaded ' + loaded + ' of ' + total + ' files.')
}
2

How about keep it simple and just show a loading screen without progress indication that disappears when everything has loaded? Check out the following topic for more information and a code example: Basic Loading Screen

I personally doubt the value of a progress bar. If you still want one, you can compute the current progress in percent ([0,1]) via itemsLoaded / itemsTotal. This value can be used to modulate a progress bar implemented via CSS. How this value is applied depends on the markup/styles.

3 Likes