FN1408001 | Away3D 14/08/18: LoaderEvent.RESOURCE_COMPLETEイベントで素材ファイルが読込めない

HTML5テクニカルノート

Away3D 14/08/18: LoaderEvent.RESOURCE_COMPLETEイベントで素材ファイルが読込めない

On the LoaderEvent.RESOURCE_COMPLETE event asset files are not loaded

ID: FN1311003

Technique: HTML5 and JavaScript

Library: Away3D TypeScript 14/08/18 build

LoaderEvent.RESOURCE_COMPLETEイベントは、AssetLibrary.load()で各素材ファイルを読込み終えると配信されます。ところが、イベントのリスナー関数が受取ったイベントオブジェクトから、素材を取出せないことがあります。

The LoaderEvent.RESOURCE_COMPLETE event is dispatched when the asset file is completed to be loaded with the AssetLibrary.load() method. However, the asset might be failed to be obtained from the event object received by the listener function.

01 問題 / Issue

以下のコードは、AssetLibrary.load()メソッドで3つの素材ファイルを読込み、LoaderEvent.RESOURCE_COMPLETEイベントのリスナー関数でそれぞれをマテリアルの適切なプロパティに定めます。けれども、キャッシュをクリアしてあると、素材は正しく読込まれないことがあります。

The snippet code below loads three asset files with the AssetLibrary.load() method and sets each of them to the proper properties of the material by the listener function of the LoaderEvent.RESOURCE_COMPLETE event. But some of them might not be loaded with the cache cleared.

var imageDiffuse = "assets/floor_diffuse.jpg";
var imageNormal = "assets/floor_normal.jpg";
var imageSpecular = "assets/floor_specular.jpg";
loadAsset(imageDiffuse);
loadAsset(imageNormal);
loadAsset(imageSpecular);
function loadAsset(url) {
  var AssetLibrary = away.library.AssetLibrary;
  AssetLibrary.addEventListener(away.events.LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
  AssetLibrary.load(new away.net.URLRequest(url));
}
function onResourceComplete(eventObject) {
  var assets = eventObject.assets;
  var count = assets.length;
  var url = eventObject.url;
  for (var i = 0; i < count; i++) {
    var asset = assets[i];
    switch (url) {
      case (imageDiffuse):
        planeMaterial.texture = asset;
        break;
      case (imageNormal):
        planeMaterial.normalMap = asset;
        break;
      case (imageSpecular):
        planeMaterial.specularMap = asset;
        break;
    }
  }
}

そこで、console.log()メソッドを以下のようにコードに加え、キャッシュはクリアしたうえで、結果を確かめましょう。すると、イベントオブジェクトのassetsプロパティから参照した素材の配列は空の場合があります(つまり、配列のArray.lengthプロパティが0です。図001参照)。

Now, let's insert the console.log() method to the code as following and clear the cache, try the code. The array of assets referred from the assets property of the event object might be empty (ie. its length property is equal to zero. See Figure 001).

function onResourceComplete(eventObject) {
  var assets = eventObject.assets;
  var count = assets.length;
  var url = eventObject.url;
  var planeMaterial = mesh.material;
console.log(count, asset, url);

}

図001■Array.length
図001
Figure 001•The Array.length property of the assets' array are equal to zero

02 対処法 / Solution

この問題を避けるためには、以下のコードのように、イベントリスナーの関数で素材の配列のArray.lengthプロパティを確かめ、値が0のときはそのURLのファイルを改めて読込みます。実際にこの対処を施したコードは、サンプル001として掲げました。

To avoid this problem, load the url again in the listener function when the length property of the assets' array is equal to zero as the following code snippet. Example 001 is working code with this solution added.

function onResourceComplete(eventObject) {
  var assets = eventObject.assets;
  var count = assets.length;
  var url = eventObject.url;
// console.log(count, asset, url);
  if (count > 0) {
    for (var i = 0; i < count; i++) {
      var asset = assets[i];
      switch (url) {
        case (imageDiffuse):
          planeMaterial.texture = asset;
          break;
        case (imageNormal):
          planeMaterial.normalMap = asset;
          break;
        case (imageSpecular):
          planeMaterial.specularMap = asset;
          break;
      }
    }
  } else {
    loadAsset(url);
  }
}

サンプル001■LoaderEvent.RESOURCE_COMPLETEイベントで素材ファイルを読込む
Example 001•Loading asset files on the LoaderEvent.RESOURCE_COMPLETE event

作成者: 野中文雄
Wriiten by Fumio Nonaka
作成日: 2014年8月24日
Date: August 24th, 2014