Getting Started - Three.js - page 55

Waiting until resources are loaded
In the Load resources asynchronously recipe, we showed how you can load external
Three.js resources asynchronously. For many sites and visualization, loading re-
sources asynchronously is a good approach. Sometimes, however, you want to make
sure that all the resources you require in your scene have been loaded beforehand.
For instance, when you're creating a game, you might want to load all the data for a
specific level beforehand. A common method of loading resources synchronously is
nesting the asynchronous callbacks we've seen in the previous recipe. This, however,
quickly becomes unreadable and very hard to manage. In this recipe, we'll use a dif-
ferent approach and work with a JavaScript library called Q.
Getting ready
As for all the external libraries that we use, we need to include the Q library in our
HTML. You can download the latest version of this library from its GitHub repository
at https://github.com/kriskowal/q , or use the version provided in the libs folder in the
sources for this topic. To include this library in your HTML page, add the following in
the head element of your HTML page:
<script src="../libs/q.js"></script>
In the sources for this chapter, you can also find an example where we load resources
synchronously. Open 01.12-wait-for-resources.html in your browser and
open the JavaScript console:
On the console output, you'll see that the required resources and models are loaded
one after another.