Display Progress Bar Till 3D Model Gets Loaded Fully




I want to show a progress bar with % before my 3D model gets loaded completely. Is there any option available in 3JS to achieve this? Currently i am logging loading % on console but i want this to be display with progress bar.

Please Help.



If you load resources with any of THREE’s loaders you can create a THREE.LoadingManager and pass it to all loaders you use for models, materials and textures. But loading progress is measured per file, so in case you have few or just one bigger file, an animation that shows it’s still pending might be better than a progress bar only that jumps from zero to 100% after some time.

var manager = new THREE.LoadingManager();

manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
    progressElement.style.width = (itemsLoaded / itemsTotal * 100) + '%';

var Loaders = {
    Texture: new THREE.TextureLoader(manager)


Does anyone know why Flash® was able to do loadedBytes/totalBytes back in the bronze age, but three can’t today? :-/


It could be possible by extending the XMLHttpRequest in THREE.XHRLoader to a chunked one.


Okay, now we’re talking! Get crackin’! We (presumably most of us) need this! And please report your findings asap!


Came across this earlier today


I haven’t had a chance to test it yet, looks interesting though.


Seems pretty cool and all, but perhaps a little overkill when one simply wants loadedBytes/totalBytes for displaying a percentage or the width of a bar. Is anyone able to bang out what Fyrestar was talking about?


Well you could look into how it’s done there and see if you can simplify it. That’s what I plan to do, but it’ll probably be a few weeks before I get round to it.


Hi looeee,

For Progressbar, currently i am using a jquery component progressbar.js for showing the loader. I am using Loading Manager’s events “onProgress” and “OnLoad” to handle the actual loading. But i am facing a problem related to model rendering. Actually once the “OnLoad” event gets call, my progressbar shows 100% and hide but my 3d model still not render. It takes some time and then it gets display in the viewer.

My expectation is like as soon as loading reaches to 100% , my 3D model must be display without any delay.Can you guide me here what i am missing into code ? I am sharing my code snippet here for your reference.

Code Snippet:

    var manager = new THREE.LoadingManager();

    manager.onStart = function (item, loaded, total) {
        console.log('Loading started');

    manager.onLoad = function () {
        console.log('Loading complete');            

    manager.onProgress = function (item, loaded, total) {            
        console.log(item, loaded, total);
        console.log('Loaded:', Math.round(loaded / total * 100, 2) + '%')

    manager.onError = function (url) {
        console.log('Error loading');

    //3D MTL & Object Loading
    var mtlLoader = new MTLLoader(manager);
    mtlLoader.setPath('media/' + this.missionId + '/3D/Model/');
    mtlLoader.load('threed.mtl', function(materials) {

        materials.materials.texture.map.magFilter = THREE.NearestFilter;
        materials.materials.texture.map.minFilter = THREE.LinearFilter;

        //var manager = new THREE.LoadingManager();
        var objLoader = new THREE.OBJLoader(manager);
        objLoader.setPath('media/' + scope.missionId + '/3D/Model/');
        objLoader.load('threed.obj', function(object) {

            object.traverse(function(child) {
                if (child instanceof THREE.Mesh) {

            console.log('Object::', object);




@avinashsrivastava you should ask a new question about this as it’s not really related.

Suggestion for a title: how can I delay calling LoadingManager.onLoad until the model actually displays?

Display Progressbar While Loading 3d Model Completelly