aframe
Kapitalförvaltningssystem

Introduktion

Anmärkningar

Exempel på användning av tillgångar

Vi placerar tillgångar inom <a-assets> och vi placerar <a-assets> inom <a-scene> . Tillgångar inkluderar:

• <a-asset-item> - Diverse tillgångar som 3D-modeller och material
• <audio> - Ljudfiler
• <img> - Bildstrukturer
• <video> - Videokonstruktioner

Scenen kommer inte att återges eller initieras förrän webbläsaren hämtar (eller fel) alla tillgångar eller tillgångssystemet når timeout.

Vi kan definiera våra tillgångar i <a-assets> och peka på tillgångarna från våra enheter med hjälp av väljare:

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

Scenen och dess enheter kommer att vänta på varje tillgång (fram till timeout) innan de initialiseras och återges.

Cross-Origin Resource Sharing (CORS)

Eftersom A-Frame hämtar tillgångar med XHR: er kräver webbläsarsäkerhet att webbläsaren ska betjäna tillgångar med CORS-rubriker (cross-origin resource sharing) om tillgången finns på en annan domän. Annars måste vi vara värd för tillgångar med samma ursprung som scenen.

För vissa alternativ serverar GitHub Pages allt med CORS-rubriker. Vi rekommenderar GitHub-sidor som en enkel installationsplattform. Eller så kan du också ladda upp tillgångar med A-Frame + Uploadcare Uploader , en tjänst som serverar filer med CORS-rubriker uppsatta.

Med tanke på att CORS-rubriker är inställda kommer <a-assets> automatiskt att ställa in crossorigin attribut på crossorigin (t.ex. <audio> , <img> , <video> ) om den upptäcker att resursen finns på en annan domän.

Förbelastning av ljud och video

Ljud- och videotillgångar blockerar bara scenen om vi ställer in autoplay eller om vi ställer in 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>

Ställa in en timeout

Vi kan ställa in en tidsgräns som när scenen börjar återges och enheter kommer att börja initialiseras oavsett om alla tillgångar har laddats. Standard timeout är 3 sekunder. För att ställa in en annan timeout skickar vi bara antalet millisekunder till timeout attributet:

Om vissa tillgångar tar lång tid att ladda, kanske vi vill ställa in en lämplig tidsgräns så att användaren inte väntar hela dagen i händelse av att deras nätverk går långsamt.

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

Ange svarstyp

Innehåll som hämtas av <a-asset-item> kommer att returneras som vanlig text. Om vi vill använda en annan arraybuffer , t.ex. arraybuffer , använder du <a-asset-item> : s response-type :

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

Hur det fungerar internt

Varje element i A-Frame ärver från <a-node> , prototypen AFRAME.ANode . ANode styr belastning och initialiseringsordning. För att ett element ska initieras (oavsett om det är <a-assets> , <a-asset-item> , <a-scene> eller <a-entity> ) måste dess barn redan ha initialiserats. Noder initialiseras nerifrån och upp.

<a-assets> är en ANode , och den väntar på att sina barn laddar innan de laddas. Och eftersom <a-assets> är ett barn av <a-scene> , måste scenen effektivt vänta på att alla tillgångar laddas. Vi har också lagt till extra belastningslogik till <a-entity> så att de uttryckligen väntar på att <a-assets> laddas om vi har definierat <a-assets> .

<a-asset-item> använder THREE.FileLoader att hämta filer. three.js lagrar de returnerade uppgifterna i THREE.Cache . Varje tre.js-lastare ärver från THREE.FileLoader , oavsett om de är en ColladaLoader , OBJLoader , ImageLoader , etc. Och alla har tillgång och är medvetna om den centrala THREE.Cache . Om A-Frame redan hämtade en fil, kommer A-Frame inte att försöka hämta den igen.

Eftersom vi blockerar enhetens initialisering på tillgångarna, vid tidpunkten för enheterna, kommer alla tillgångar redan ha hämtats. Så länge vi definierar <a-asset-item> s, och enheten hämtar filer med någon form THREE.FileLoader , THREE.FileLoader cachningen automatiskt.

Åtkomst till FileLoader och Cache

För att komma åt filen FileLoader om vi vill lyssna närmare:

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

Så här får du åtkomst till cachen som lagrar XHR-svar:

console.log(THREE.Cache);