Display Progress Bar Till 3D Model Gets Loaded Fully

Questions
,
1

Hi,

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.

Thanks
Avinash

1 Like
2

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)
}
4 Likes
3

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

4

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

5

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

6

Came across this earlier today

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

3 Likes
7

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?

8

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.

9

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');            
        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

10

@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?

11

Did you ever figure this out? The until model displays portion is very relevant to my interests.

12

No not yet. I am still having this problem… my progress bar reach to 100% before model render. Are you also having similar issue ? If you find any solution please let me know also.

13

I’m actually working on a product configurator. It is partly controlled with an inline SVG and then by adjusting material.color for everything else. The SVG is working fine as it does for all my other products but adjusting the color of the model is happening before the model is in scene. onAfterRender worked buuuuuuut it was running every time the scene rendered which was too much. So now it’s trying to see if it can work tying more to the model, but I am not getting the gltf to push the meshes into a variable to watch for the meshes to render instead of the scene.

14

There is a solution - but it is rather useless and too much effort.
You cannot create a 30 line css, a loader, an onload() and additional onProgress code stuff for each poop you want to add to your scene.
I’ll stick to threeJS with my current project, since I invested a lot of time into it, and see no really better alternative to easy swap to, anyway.
In case I find something easier I will report it here and look back here occasionally - maybe someone offers a simple function.
I mean every programming language with graphic engine has such simple things as a oneline code ready …

15

Was this implemented?

17

Dunno… That was posted over four years ago, and I have been away from WebGL for about a year or so, doing 3D animations full time… Hopefully it is though… I may need to jump back into three.js in the near future…

2 Likes