aframe - A-Frame のマテリアル/エンティティにテクスチャがロード/適用されたことをリッスンまたは検出する方法は?

Question

テクスチャがエンティティにいつ適用されたかを知るにはどうすればよいですか?

<a-entity material="src: url(mytexture.png)"></a-entity>

material-texture-loadedイベント ( https://aframe.io/docs/0.2.0/components/material.html )がありますが、(実際に適用されるのではなく) テクスチャがブラウザーに完全に到着した後にのみ発生するようです。

Answer 1

three.jsを設定して使用すると、materialtextureloadedすぐにイベントが適用されます。material.mapmaterial.needsUpdate

私たちが発見したのは、テクスチャ イメージの幅/高さが2 のべき乗の解像度 (64x64、512x512、128x1024 など) ではないということでした。これは、 で使用される正距円筒図法写真のような大きなテクスチャでは特に重要ですa-sky。

そのため、実行時に three.js がテクスチャのサイズを変更するのに時間がかかりました。テクスチャのサイズを変更すると、テクスチャが画面に表示される時間に近づいてイベントが発生しました。

myEntityEl.addEventListener('materialtextureloaded', function () {
  setTimeout(function () {  // setTimeout for good measure.
    console.log('material now showing on screen');
  }, 200);
});