aframe
Asset Management System

Einführung

Bemerkungen

Beispiel für die Verwendung von Assets

Wir platzieren Assets innerhalb von <a-assets> und wir legen <a-assets> innerhalb von <a-scene> . Assets beinhalten:

• <a-asset-item> - Verschiedene Assets wie 3D-Modelle und -Materialien
• <audio> - Audiodateien
• <img> - Bildtexturen
• <video> - <video>

Die Szene wird erst gerendert oder initialisiert, wenn der Browser alle Assets abruft (oder Fehler ausgibt) oder das Asset-System das Timeout erreicht.

Wir können unsere Vermögenswerte in <a-assets> und mithilfe von Selektoren auf diese Assets unserer Unternehmen verweisen:

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

Die Szene und ihre Entitäten warten auf jedes Asset (bis zum Timeout), bevor es initialisiert und gerendert wird.

Ressourcenübergreifende Ressourcenfreigabe (CORS)

Da A-Frame Assets mithilfe von XHRs abruft , muss der Browser für die Browsersicherheit Assets mit CORS-Headern bereitstellen , wenn sich das Asset in einer anderen Domäne befindet. Andernfalls müssten wir Assets mit demselben Ursprung wie die Szene hosten.

Für einige Optionen liefert GitHub Pages alles mit CORS-Headern. Wir empfehlen GitHub Pages als einfache Implementierungsplattform. Sie können Assets auch mit dem A-Frame + Uploadcare Uploader hochladen , einem Dienst, der Dateien mit eingestellten CORS-Headern bereitstellt .

Da CORS-Header festgelegt sind , werden <a-assets> crossorigin Attribute für crossorigin (z. B. <audio> , <img> , <video> ) automatisch festgelegt, wenn festgestellt wird, dass sich die Ressource in einer anderen Domäne befindet.

Audio und Video vorladen

Audio- und Video-Assets blockieren die Szene nur, wenn wir autoplay oder preload="auto" einstellen:

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

Timeout einstellen

Wir können ein Timeout festlegen, nach dessen Erreichen die Szene mit dem Rendern beginnt und die Entitäten initialisiert werden, unabhängig davon, ob alle Assets geladen wurden. Das Standard-Timeout beträgt 3 Sekunden. Um ein anderes Timeout einzustellen, übergeben wir einfach die Anzahl der Millisekunden an das timeout Attribut:

Wenn das Laden einiger Assets sehr lange dauert, möchten wir möglicherweise ein geeignetes Timeout festlegen, sodass der Benutzer nicht den ganzen Tag wartet, falls sein Netzwerk langsam ist.

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

Angabe des Antworttyps

Von <a-asset-item> abgerufene Inhalte werden als reiner Text zurückgegeben. Wenn Sie einen anderen Antworttyp verwenden arraybuffer , z. B. arraybuffer , verwenden Sie das response-type Attribut von <a-asset-item> :

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

Wie es intern funktioniert

Jedes Element in A-Frame erbt von <a-node> , dem Prototyp AFRAME.ANode . ANode steuert die Lade- und Initialisierungsreihenfolge. Damit ein Element initialisiert werden kann (entweder <a-assets> , <a-asset-item> , <a-scene> oder <a-entity> ), müssen die untergeordneten Elemente bereits initialisiert sein. Knoten initialisieren von unten nach oben.

<a-assets> ist ein ANode und wartet, bis seine Kinder geladen werden, bevor es geladen wird. Und da <a-assets> ein Kind von <a-scene> , muss die Szene effektiv warten, bis alle Assets geladen sind. Wir haben auch eine zusätzliche Ladelogik zu <a-entity> hinzugefügt, sodass sie explizit auf das Laden von <a-assets> warten, wenn <a-assets> .

<a-asset-item> verwendet THREE.FileLoader , um Dateien abzurufen. three.js speichert die zurückgegebenen Daten in THREE.Cache . Jeder drei.js-Loader erbt von THREE.FileLoader , unabhängig THREE.FileLoader , ob es sich um ColladaLoader , OBJLoader , ImageLoader usw. handelt. Alle haben Zugriff und kennen den zentralen THREE.Cache . Wenn A-Frame bereits eine Datei abgerufen hat, versucht A-Frame nicht, sie erneut abzurufen.

Da wir also die Entitätsinitialisierung für Assets blockieren, sind alle Assets zum Zeitpunkt, zu dem Entities geladen werden, bereits abgerufen worden. Solange wir <a-asset-item> s definieren und die Entität Dateien mit dem Formular THREE.FileLoader , THREE.FileLoader Caching automatisch.

Zugriff auf FileLoader und Cache

Um auf den three.js FileLoader FileLoader wenn wir genauer FileLoader wollen:

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

So greifen Sie auf den Cache zu, in dem XHR-Antworten gespeichert sind:

console.log(THREE.Cache);