aframe
Sistema di gestione delle risorse

introduzione

Osservazioni

Esempio di utilizzo delle risorse

Inseriamo le risorse in <a-assets> e posizioniamo <a-assets> all'interno di <a-scene> . Le attività includono:

• <a-asset-item> - Asset vari come modelli e materiali 3D
• <audio> - File audio
• <img> - Texture immagine
• <video> - Texture video

La scena non verrà renderizzata o inizializzata fino a quando il browser non recupera (o commette errori) tutte le risorse o il sistema di asset raggiunge il timeout.

Possiamo definire le nostre attività in <a-assets> e indicare tali risorse dalle nostre entità utilizzando selettori:

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

La scena e le sue entità attenderanno ogni risorsa (fino al timeout) prima dell'inizializzazione e del rendering.

Cross-Origin Resource Sharing (CORS)

Poiché A-Frame recupera gli asset utilizzando XHR , la sicurezza del browser richiede che il browser serva le risorse con intestazioni di condivisione delle risorse di origine incrociata (CORS) se l'asset si trova su un dominio diverso. Altrimenti, dovremmo ospitare risorse sulla stessa origine della scena.

Per alcune opzioni, GitHub Pages serve tutto con le intestazioni CORS. Consigliamo GitHub Pages come una semplice piattaforma di distribuzione. Oppure puoi anche caricare le risorse utilizzando A-Frame + Uploadcare Uploader , un servizio che serve i file con le intestazioni CORS impostate.

Dato che le intestazioni CORS sono impostate, <a-assets> imposterà automaticamente crossorigin attributi crossorigin sugli elementi multimediali (ad esempio, <audio> , <img> , <video> ) se rileva che la risorsa si trova su un dominio diverso.

Precaricamento audio e video

Le risorse audio e video bloccano la scena solo se impostiamo la autoplay o se 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>

Impostazione di un timeout

Possiamo impostare un timeout che, una volta raggiunto, la scena inizierà il rendering e le entità inizieranno l'inizializzazione indipendentemente dal fatto che tutte le risorse siano state caricate. Il timeout predefinito è 3 secondi. Per impostare un timeout diverso, passiamo semplicemente il numero di millisecondi all'attributo timeout :

Se alcune attività richiedono molto tempo per essere caricate, potremmo voler impostare un timeout appropriato in modo che l'utente non stia aspettando tutto il giorno nel caso in cui la rete sia lenta.

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

Specifica del tipo di risposta

Il contenuto recuperato da <a-asset-item> verrà restituito come testo normale. Se si desidera utilizzare un tipo di risposta diverso, ad esempio arraybuffer , utilizzare l'attributo del response-type <a-asset-item> :

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

Come funziona internamente

Ogni elemento in A-Frame eredita da <a-node> , il prototipo AFRAME.ANode . ANode controlla il carico e l'ordine di inizializzazione. Per un elemento da inizializzare (che sia <a-assets> , <a-asset-item> , <a-scene> o <a-entity> ), i suoi figli devono essere già inizializzati. I nodi inizializzano dal basso verso l'alto.

<a-assets> è un ANode e attende che i suoi figli ANode prima che carichi. E dal momento che <a-assets> è figlio di <a-scene> , la scena deve effettivamente attendere il caricamento di tutte le risorse. Abbiamo anche aggiunto una logica di carico extra a <a-entity> tale che attendono esplicitamente <a-assets> da caricare se abbiamo definito <a-assets> .

<a-asset-item> utilizza THREE.FileLoader per recuperare i file. three.js memorizza i dati restituiti in THREE.Cache . Ogni loader three.js eredita da THREE.FileLoader , indipendentemente dal THREE.FileLoader che si tratti di ColladaLoader , OBJLoader , ImageLoader , ecc. E tutti hanno accesso e sono a conoscenza del THREE.Cache centrale. Se A-Frame ha già recuperato un file, A-Frame non proverà a recuperarlo di nuovo.

Quindi, poiché blocciamo l'inizializzazione delle entità sulle risorse, per il momento in cui le entità caricano, tutte le risorse saranno già state recuperate. Finché definiamo <a-asset-item> s, e l'entità sta recuperando i file utilizzando qualche forma THREE.FileLoader , la cache funzionerà automaticamente.

Accesso a FileLoader e Cache

Per accedere a tre.js FileLoader se vogliamo ascoltare più da vicino:

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

Per accedere alla cache che memorizza le risposte XHR:

console.log(THREE.Cache);