Display Progressbar While Loading 3d Model Completelly

Questions
,
1

Hi,

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. Also progressbar doesn’t move smoothly. It starts correctly but suddenly it reaches to 100% which seems not good.

My expectation is like as soon as loading reaches to 100% , my 3D model must be display without any delay.Also the loading should be in sync with object loading of threejs. Can anyone guide me here what i am missing into code ? I am sharing my code snippet here for 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');            
    bar.destroy();
};

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

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.preload();
    materials.materials.texture.map.magFilter = THREE.NearestFilter;
    materials.materials.texture.map.minFilter = THREE.LinearFilter;

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

        object.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                scope.objects.push(child);
            }
        });

        scope.scene.add(object);
        console.log('Object::', object);
    });

});

Thanks
Avinash

1 Like
2

Maybe this helps:

manager.onProgress = function ( item, loaded, total ) {      

   bar.animate( loaded / total );

};
1 Like
3

To clarify I think the main question here is that when loading a large model in the standard manner, i.e.

  1. Setup manager.onload
  2. Instantiate loader
  3. Load model (and textures)
  4. Onload function is called which hides loading overlay
  5. Add model to scene
  6. Render scene

The manager.onload function is called too early - that is, a blank scene is rendered for a few seconds before the model displays.

This can happen even if the loading overlay is hidden later:

  1. Instantiate loader
  2. Load model (and textures)
  3. Add model to scene
  4. Render scene
  5. Hide loading overlay

The problem is that step 3 takes an unknown amount of time and involves uploading buffers to the graphics card. So steps 4 and 5 can happen before its done.

4

Thanks looeee, But what is tha solution for this. In sketchfab, if you see you will find that their loader works perfectly.It starts and gets increase at a constant rate and as soon as it reaches to 100%, Model gets display immediately. No delay. I wanted same functionality.

5

Hi Mugen,

Thanks for your reply. I tried your solution and it works (Still there is a small delay but better than earlier). But still my loader is not increasing at a constant rate. It starts from 0 then it reaches to 33% and then suddenly gets complete to 100%, which doesn’t give an impression of a progressbar. Can you help to fix this issue ?

I want the progress bar to increase at constant rate in sync with object loading.

6

@avinashsrivastava Please just stick to dealing with one question per post. Things get confusing if you are trying to get help on multiple things at once, and you already made a post about smoothly increasing loading bars.