aframe
System zarządzania aktywami

Wprowadzenie

Uwagi

Przykładowe wykorzystanie zasobów

Umieszczamy zasoby w <a-assets> i umieszczamy <a-assets> w <a-scene> . Aktywa obejmują:

• <a-asset-item> - Różne zasoby, takie jak modele 3D i materiały
• <audio> - Pliki dźwiękowe
• <img> - tekstury obrazu
• <video> - Tekstury wideo

Scena nie będzie renderowana ani inicjowana, dopóki przeglądarka nie pobierze (lub nie wyłączy błędów) wszystkich zasobów lub system zasobów nie przekroczy limitu czasu.

Możemy zdefiniować nasze aktywa w <a-assets> i wskazać te aktywa od naszych podmiotów za pomocą selektorów:

<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>

Scena i jej podmioty będą czekać na każdy zasób (aż do przekroczenia limitu czasu) przed zainicjowaniem i renderowaniem.

Udostępnianie zasobów między źródłami (CORS)

Ponieważ A-Frame pobiera zasoby za pomocą XHR , zabezpieczenia przeglądarki wymagają, aby przeglądarka obsługiwała zasoby z nagłówkami współdzielenia zasobów pochodzących z różnych źródeł (CORS), jeśli zasób znajduje się w innej domenie. W przeciwnym razie musielibyśmy hostować zasoby tego samego pochodzenia co scena.

W przypadku niektórych opcji GitHub Pages obsługuje wszystko z nagłówkami CORS. Polecamy GitHub Pages jako prostą platformę wdrażania. Możesz też przesłać zasoby za pomocą A-Frame + Uploadcare Uploader , usługi, która obsługuje pliki z ustawionymi nagłówkami CORS.

Biorąc pod uwagę, że nagłówki CORS są ustawione, <a-assets> crossorigin <a-assets> automatycznie ustawi atrybuty crossorigin na elementach multimedialnych (np. <audio> , <img> , <video> ), jeśli wykryje, że zasób znajduje się w innej domenie.

Wstępne ładowanie audio i wideo

Zasoby audio i wideo zablokują scenę tylko wtedy, gdy ustawimy autoplay lub jeśli ustawimy 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>

Ustawianie limitu czasu

Możemy ustawić limit czasu, po osiągnięciu którego scena zacznie się renderować i jednostki zaczną się inicjować bez względu na to, czy wszystkie zasoby zostały załadowane. Domyślny limit czasu to 3 sekundy. Aby ustawić inny limit czasu, po prostu przekazujemy liczbę milisekund do atrybutu timeout :

Jeśli ładowanie niektórych zasobów zajmuje dużo czasu, możemy chcieć ustawić odpowiedni limit czasu, aby użytkownik nie czekał przez cały dzień, na wypadek gdyby ich sieć działała wolniej.

<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>

Określanie typu odpowiedzi

Treści pobrane przez <a-asset-item> zostaną zwrócone jako zwykły tekst. Jeśli chcemy użyć innego typu odpowiedzi, np. arraybuffer , użyj atrybutu response-type <a-asset-item> :

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

Jak to działa wewnętrznie

Każdy element w ramce A dziedziczy po <a-node> , prototypie AFRAME.ANode . ANode kontroluje ładowanie i kolejność inicjowania. Aby element mógł zostać zainicjowany (niezależnie od tego, czy jest to <a-assets> , <a-asset-item> , <a-scene> , <a-entity> ), jego elementy potomne muszą już zostać zainicjowane. Węzły inicjują się od dołu do góry.

<a-assets> ANode <a-assets> jest ANode i czeka na załadowanie przez dzieci przed załadowaniem. A ponieważ <a-assets> jest dzieckiem <a-scene> , scena musi efektywnie czekać na załadowanie wszystkich zasobów. Dodaliśmy także dodatkową logikę ładowania do <a-entity> tak że jawnie czekają na <a-assets> aby załadować, jeśli zdefiniowaliśmy <a-assets> .

<a-asset-item> THREE.FileLoader <a-asset-item> używa THREE.FileLoader do pobierania plików. three.js przechowuje zwrócone dane w THREE.Cache . Każdy program ładujący Three.js dziedziczy z THREE.FileLoader , bez względu na to, czy jest to ColladaLoader , OBJLoader , ImageLoader itp. I wszyscy oni mają dostęp i są świadomi centralnej THREE.Cache . Jeśli A-Frame już pobrał plik, A-Frame nie spróbuje go ponownie pobrać.

Zatem, ponieważ blokujemy inicjowanie encji na zasobach, do czasu załadowania encji wszystkie zasoby zostaną już pobrane. Tak długo, jak zdefiniujemy <a-asset-item> THREE.FileLoader <a-asset-item> , a jednostka THREE.FileLoader pliki przy użyciu formularza THREE.FileLoader , buforowanie będzie działać automatycznie.

Dostęp do FileLoader i pamięci podręcznej

Aby uzyskać dostęp do FileLoader three.js, jeśli chcemy uważniej słuchać:

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

Aby uzyskać dostęp do pamięci podręcznej przechowującej odpowiedzi XHR:

console.log(THREE.Cache);