aframe
資産管理システム

前書き

備考

資産の使用例

我々は内の資産を置く<a-assets> 、そして我々は置く<a-assets>内<a-scene> 。資産には以下が含まれます：

• <a-asset-item> - 3Dモデルや素材などのその他の資産
• <audio> - サウンドファイル
• <img> - イメージテクスチャ
• <video> - ビデオテクスチャ

ブラウザーがすべてのアセットをフェッチ（またはエラーアウト）するまで、またはアセットシステムがタイムアウトに達するまで、シーンはレンダリングまたは初期化されません。

<a-assets>資産を定義し、セレクタを使用してエンティティからの資産を指すことができます。

<a-scene>
  <!-- Asset management system. -->
  <a-assets>
    <a-asset-item id="horse-obj" src="horse.obj"></a-asset-item>
    <a-asset-item id="horse-mtl" src="horse.mtl"></a-asset-item>
    <a-mixin id="giant" scale="5 5 5"></a-mixin>
    <audio id="neigh" src="neigh.mp3"></audio>
    <img id="advertisement" src="ad.png">
    <video id="kentucky-derby" src="derby.mp4"></video>
  </a-assets>

  <!-- Scene. -->
  <a-plane src="advertisement"></a-plane>
  <a-sound src="#neigh"></a-sound>
  <a-entity geometry="primitive: plane" material="src: #kentucky-derby"></a-entity>
  <a-entity mixin="giant" obj-model="obj: #horse-obj; mtl: #horse-mtl"></a-entity>
</a-scene>

シーンとそのエンティティは、初期化とレンダリングの前にすべてのアセットがタイムアウトするまで待機します。

クロスオリジンリソース共有（CORS）

A-FrameはXHRを使用してアセットを取得するため 、ブラウザのセキュリティでは、アセットが別のドメインにある場合、ブラウザは元のリソース共有（CORS）ヘッダーを持つアセットを提供する必要があります。それ以外の場合は、シーンと同じ起点でアセットをホストする必要があります。

いくつかのオプションについては、 GitHub PagesはすべてCORSヘッダーを使用します。 GitHub Pagesをシンプルなデプロイメントプラットフォームとしてお勧めします。または、CORSヘッダーが設定されたファイルを提供するサービスであるA-Frame + Uploadcare Uploaderを使用してアセットをアップロードすることもできます。

CORSヘッダー が設定されている場合、 <a-assets>は、リソースが異なるドメイン上にあることを検出すると、メディア要素（たとえば、 <audio> 、 <img> 、 <video> ）のcrossorigin属性を自動的に設定します。

オーディオとビデオのプリロード

オーディオとビデオのアセットは、 autoplayを設定した場合、またはpreload="auto"を設定した場合のみシーンをブロックします。

<a-scene>
  <a-assets>
    <!-- These will not block. -->
    <audio src="blockus.mp3"></audio>
    <video src="loadofblocks.mp4"></video>

    <!-- These will block. -->
    <audio src="blocky.mp3" autoplay></audio>
    <video src="blockiscooking.mp4" preload="auto"></video>
  </a-assets>
</a-scene>

タイムアウトの設定

到達するとシーンがレンダリングを開始し、すべてのアセットがロードされているかどうかにかかわらずエンティティが初期化を開始するタイムアウトを設定できます。デフォルトのタイムアウトは3秒です。異なるタイムアウトを設定するには、 timeout属性にミリ秒単位で渡します。

いくつかのアセットが読み込みに時間がかかる場合は、ネットワークが遅い場合にユーザーが一日待っていないように適切なタイムアウトを設定することができます。

<a-scene>
  <a-assets timeout="10000">
    <!-- You got until the count of 10 to load else the show will go on without you. -->
    <img src="bigimage.png">
  </a-asset>
</a-scene>

応答タイプの指定

<a-asset-item>によって取得されたコンテンツはプレーンテキストとして返されます。 arraybufferなどの異なる応答タイプを使用する場合は、 <a-asset-item>のresponse-type属性を使用します。

<a-asset-item response-type="arraybuffer" src="model.gltf"></a-asset-item>

内部的な仕組み

A-Frameの各要素は、 <a-node> 、 AFRAME.ANodeプロトタイプから継承し<a-node> 。 ANodeはロードと初期化の順序を制御します。 <a-assets> 、 <a-asset-item> 、 <a-scene> 、または<a-entity>いずれであろうと、要素を初期化するには、その子要素が既に初期化されている必要があります。ノードはボトムアップを初期化します。

<a-assets>はANodeであり、ロードする前にその子がロードされるのを待ちます。また、 <a-assets>は<a-scene>子であるため、シーンはすべてのアセットが読み込まれるまで待たなければなりません。また、に余分な負荷のロジックを追加しました<a-entity>彼らは、明示的に待つような<a-assets>我々が定義されている場合にロードするために<a-assets> 。

<a-asset-item>はTHREE.FileLoaderを使用してファイルを取得します。 three.jsは返されたデータをTHREE.Cacheに格納しTHREE.Cache 。すべてのthree.jsローダーは、 ColladaLoader 、 OBJLoader 、 ImageLoaderなど、 ImageLoaderから継承しTHREE.FileLoader 。また、すべてのアクセス権を持ち、セントラルTHREE.Cache認識しています。 A-Frameがすでにファイルをフェッチした場合、A-Frameは再度フェッチすることはありません。

したがって、資産のエンティティの初期化をブロックするので、時間エンティティがロードされるまでに、すべての資産がすでにフェッチされています。 <a-asset-item>を定義し、エンティティがTHREE.FileLoaderという形式を使用してファイルを取得しているTHREE.FileLoader 、キャッシュは自動的に機能します。

FileLoaderとキャッシュへのアクセス

もっと耳を傾けたい場合はthree.js FileLoaderアクセスする：

console.log(document.querySelector('a-assets').fileLoader);

XHR応答を格納するキャッシュにアクセスするには：

console.log(THREE.Cache);