A-Frameのモデルロード完了のイベントを受け取る

A-Frameのobjモデル等のロード完了後にイベントが受け取れるがどう書けばいいかドキュメントに書いていなかったのでメモ

A-Frameのobjのロードのドキュメント

obj-model – A-Frame

コード

html側

<a-scene>
  <a-assets>
    <a-asset-item id="tree-obj" src="/path/to/tree.obj"></a-asset-item>
    <a-asset-item id="tree-mtl" src="/path/to/tree.mtl"></a-asset-item>
  </a-assets>
  <a-entity obj-model="obj: #tree-obj; mtl: #tree-mtl" model-loader></a-entity>
</a-scene>

js側

model-loadedのイベントに処理を登録する感じです。

AFRAME.registerComponent('model-loader', {
  init: function () {
    this.el.addEventListener('model-loaded', function () {
      // ここに処理を記載
      console.log('Finish load');
    });
  }
});

実行してみると、モデルのロードが終わったタイミングで"Finish load"が表示されます！