Loading other resources asynchronously with progress

Besides loading specific resources, Three.js also provides a simple helper object to load any type of resource asynchronously. In this recipe, we'll explain how you can use the THREE.XHRLoader object to load any type of resource asynchronously.

Getting ready

Before you get started with this recipe, make sure that you've walked through the steps explained in the Getting ready section of the Loading textures asynchronously recipe. In the following section, we'll reference the JavaScript callbacks defined in the Getting ready section of that recipe.

How to do it...

1. The final resource loader we want to show in this recipe is the THREE.XHRLoader object. This loader allows you to load any resource that you might need in your Three.js scene:

       function loadOthers(res) {
         var xhrLoader = new THREE.XHRLoader();
         xhrLoader.load(res, onLoadCallback, onProgressCallback, onErrorCallback);
       }

2. The arguments for the XHRLoader.load function should look pretty familiar by now, as it's pretty much the same as for the other loaders. First, we pass the location of the resource we want to load, and then we specify the various callbacks. The output from this function looks like this:
   

   In the preceding screenshot, you can also see the progress while the resource is being loaded.