How to make a loading screen while using three.js and jsonLoader?

Question

I have a very large amount of texture files and models to load into my project. I am trying to show a status bar or some sort of loading screen while everything is loading. If anyone could give me any info on how to do this that would be awesome.

Thanks!

Answer 1

The minimum required code is just this:

THREE.DefaultLoadingManager.onProgress = function ( item, loaded, total ) {
    console.log( item, loaded, total );
};

Instead of printing to the console you can for example start the rendering loop "if loaded == total". Or/And you can update any loading indicater. (The code is from one of the examples.)

Answer 2

You can use a pattern like this to manage the loading process:

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

};

manager.onError = function( url ) {

    console.log( 'Error loading' );

};

var loader = new THREE.TextureLoader( manager );

var texture = loader.load( 'texture.jpg', function ( texture ) {

    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set( 2, 2 );

} );

var loader = new THREE.OBJLoader( manager );

loader.load( 'file.obj', function( object ) {

    // your code

 } );

three.js r.85