aframe
Activabeheersysteem

Invoering

Opmerkingen

Voorbeeldgebruik van activa

We plaatsen activa binnen <a-assets> en we plaatsen <a-assets> in <a-scene> . Activa omvatten:

• <a-asset-item> - Diverse elementen zoals 3D-modellen en materialen
• <audio> - Geluidsbestanden
• <img> - Afbeeldingsstructuren
• <video> - Videotexturen

De scène wordt pas weergegeven of geïnitialiseerd als de browser alle activa ophaalt (of fouten maakt) of het activasysteem de time-out bereikt.

We kunnen onze activa definiëren in <a-assets> en verwijzen naar die activa van onze entiteiten met behulp van selectors:

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

De scène en zijn entiteiten wachten op elk item (tot de time-out) voordat het wordt geïnitialiseerd en weergegeven.

Cross-Origin Resource Sharing (CORS)

Aangezien A-Frame activa ophaalt met behulp van XHR's , vereist browserbeveiliging dat de browser activa met CORS-headers (Cross-Origin Resource Sharing) aanbiedt als het activum zich op een ander domein bevindt. Anders zouden we activa moeten hosten op dezelfde oorsprong als de scène.

Voor sommige opties biedt GitHub Pages alles met CORS-headers. We raden GitHub-pagina's aan als een eenvoudig implementatieplatform. Of u kunt ook middelen uploaden met de A-Frame + Uploadcare Uploader , een service die bestanden bedient met CORS-headers ingesteld.

Aangezien CORS-headers zijn ingesteld, stelt <a-assets> automatisch crossorigin attributen in op media-elementen (bijv. <audio> , <img> , <video> ) als het detecteert dat de bron zich op een ander domein bevindt.

Audio en video vooraf laden

Audio- en video-items blokkeren de scène alleen als we autoplay of als we 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>

Time-out instellen

We kunnen een time-out instellen dat wanneer deze wordt bereikt, de scène wordt gestart en entiteiten worden geïnitialiseerd, ongeacht of alle activa zijn geladen. De standaardtime-out is 3 seconden. Om een andere time-out in te stellen, geven we het aantal milliseconden gewoon door aan het timeout outkenmerk:

Als het laden van bepaalde items lang duurt, is het mogelijk dat u een geschikte time-out wilt instellen, zodat de gebruiker niet de hele dag wacht als zijn netwerk traag is.

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

Reactietype opgeven

Inhoud die wordt opgehaald met <a-asset-item> wordt geretourneerd als platte tekst. Als we willen een andere reactie-type te gebruiken, zoals arraybuffer , gebruik <a-asset-item> 's response-type attribuut:

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

Hoe het intern werkt

Elk element in A-Frame neemt over van <a-node> , het prototype AFRAME.ANode . ANode bepaalt de volgorde van laden en initialisatie. Om een element te initialiseren (of het nu <a-assets> , <a-asset-item> , <a-scene> of <a-entity> ), moeten de onderliggende elementen al zijn geïnitialiseerd. Knopen initialiseren bottom-up.

<a-assets> is een ANode en wacht tot zijn kinderen zijn geladen voordat het wordt geladen. En aangezien <a-assets> een kind van <a-scene> , moet de scène effectief wachten tot alle middelen zijn geladen. We hebben ook extra laadlogica toegevoegd aan <a-entity> zodat ze expliciet wachten tot <a-assets> wordt geladen als we <a-assets> hebben gedefinieerd.

<a-asset-item> gebruikt THREE.FileLoader om bestanden op te halen. three.js slaat de geretourneerde gegevens op in THREE.Cache . Elke three.js-lader erft van THREE.FileLoader , of ze nu een ColladaLoader , OBJLoader , ImageLoader , enz. ImageLoader . Ze hebben allemaal toegang en zijn zich bewust van de centrale THREE.Cache . Als A-Frame al een bestand heeft opgehaald, probeert A-Frame het niet opnieuw op te halen.

Aangezien we de initialisatie van entiteiten op activa blokkeren, zijn alle activa tegen de tijd dat entiteiten worden geladen al opgehaald. Zolang we <a-asset-item> s definiëren en de entiteit bestanden THREE.FileLoader met behulp van een of andere vorm THREE.FileLoader , werkt caching automatisch.

Toegang tot de FileLoader en de cache

Om toegang te krijgen tot de three.js FileLoader als we beter willen luisteren:

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

Om toegang te krijgen tot de cache waarin XHR-reacties worden opgeslagen:

console.log(THREE.Cache);