Firstly, we want to call loadModel(model).

Once the model is loaded, we load, using the then function, a texture using the loadTexture(texture) function. Once this texture is loaded, we will then load the next resource and so on. In this code fragment, you can also see that we also call a catch and a progress function. If an error occurs during loading, the function provided to catch() will be called. The same goes for progress(). If one of the methods wants to provide information about its progress, the function passed into progress() will be called.

However, you will then find out that this won't work with the functions from our previous recipe. To get this to work, we have to replace the callbacks from these functions with a special Q construct that is called a deferred function:

    function loadTexture(texture) {

      var deferred = Q.defer();
      var text = THREE.ImageUtils.loadTexture
      (texture, null, function(loaded) {
        console.log("Loaded texture: ", texture);
        deferred.resolve(loaded);
      }, function(error) {
        deferred.reject(error);
      });

      return deferred.promise;
    }

In this code snippet, we create a new JavaScript object with the name deferred. The deferred object will make sure that the results of the callbacks, this time defined as anonymous functions, are returned in such a way that we can use the then function we saw at the beginning of this chapter. If the resource is loaded successfully, we use the deferred.resolve function to store the result; if the resource was loaded unsuccessfully, we store the error using the deferred.reject function.

We use the same approach for the loadModel, loadOthers, and loadModelWithProgress functions:

    function loadModel(model) {

      var deferred = Q.defer();
      var jsonLoader = new THREE.JSONLoader();
      jsonLoader.load(model, function(loaded) {
        console.log("Loaded model: ", model);
        deferred.resolve(loaded);
      }, null);

      return deferred.promise;
    }

    function loadOthers(res) {
      var deferred = Q.defer();

      var xhrLoader = new THREE.XHRLoader();
      xhrLoader.load(res, function(loaded) {
        console.log("Loaded other: ", res);
        deferred.resolve(loaded);
      }, function(progress) {
        deferred.notify(progress);
      }, function(error) {
        deferred.reject(error);
      });

      return deferred.promise;
    }

In the loadOthers function, we are also provided with the progress information. To make sure that the progress callback is handled correctly, we use the deferred.notify() function and pass in the progress object:

    function loadModelWithProgress(model) {
      var deferred = Q.defer();

      var jsonLoader = new THREE.JSONLoader();
      jsonLoader.loadAjaxJSON(jsonLoader, model,
      function(model) {
        console.log("Loaded model with progress: ", model);
        deferred.resolve(model)
      }, null,
      function(progress) {
        deferred.notify(progress)
      });

      return deferred.promise;
    }

With these changes, we can now load the resources synchronously.