Graphics Reference
In-Depth Information
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:
