aframe
Système de gestion des actifs

Introduction

Remarques

Exemple d'utilisation des actifs

Nous plaçons des actifs dans <a-assets> , et nous plaçons <a-assets> dans <a-scene> . Les actifs comprennent:

• <a-asset-item> - Éléments divers tels que modèles 3D et matériaux
• <audio> - Fichiers son
• <img> - textures d'image
• <video> - Textures vidéo

La scène ne sera pas rendue ni initialisée tant que le navigateur n'aura pas récupéré (ou que des erreurs ne seront pas détectées) tous les actifs ou que le système d'actifs atteindra le délai d'attente.

Nous pouvons définir nos actifs dans <a-assets> et indiquer les actifs de nos entités en utilisant des sélecteurs:

<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 scène et ses entités attendent chaque actif (jusqu’à la temporisation) avant l’initialisation et le rendu.

Partage de ressources d'origine croisée (CORS)

Étant donné qu'A -Frame récupère les ressources à l'aide des XHR , la sécurité du navigateur requiert que le navigateur serve des éléments avec des en-têtes de partage de ressources d'origine croisée (CORS) si l'actif se trouve dans un domaine différent. Sinon, il faudrait héberger des actifs de même origine que la scène.

Pour certaines options, GitHub Pages sert à tout avec les en-têtes CORS. Nous recommandons GitHub Pages comme plate-forme de déploiement simple. Vous pouvez également télécharger des éléments à l'aide de A-Frame + Uploadcare Uploader , un service qui sert des fichiers avec les en-têtes CORS.

Étant donné que les en- têtes CORS sont définis, <a-assets> définira automatiquement les attributs crossorigin sur les éléments multimédias (par exemple, <audio> , <img> , <video> ) s'il détecte que la ressource se trouve dans un domaine différent.

Préchargement audio et vidéo

Les ressources audio et vidéo ne bloquent la scène que si nous configurons la autoplay ou si nous définissons 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>

Définition d'un délai d'attente

Nous pouvons définir un délai d'expiration qui, une fois atteint, va commencer le rendu et les entités commenceront à s'initialiser, que tous les actifs aient été chargés ou non. Le délai d'attente par défaut est de 3 secondes. Pour définir un délai d'expiration différent, il suffit de transmettre le nombre de millisecondes à l'attribut timeout :

Si certains actifs prennent beaucoup de temps à charger, vous pouvez définir un délai d'attente approprié pour que l'utilisateur n'attende pas toute la journée au cas où son réseau serait lent.

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

Spécification du type de réponse

Le contenu extrait par <a-asset-item> sera renvoyé en texte brut. Si vous souhaitez utiliser un type de réponse différent, tel que arraybuffer , utilisez l'attribut de response-type <a-asset-item> :

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

Comment ça marche en interne

Chaque élément de A-Frame hérite de <a-node> , le prototype AFRAME.ANode . ANode contrôle l'ordre de chargement et d'initialisation. Pour qu'un élément soit initialisé (que ce soit <a-assets> , <a-asset-item> , <a-scene> ou <a-entity> ), ses enfants doivent déjà être initialisés. Les nœuds initialisent de bas en haut.

<a-assets> est une ANode et attend que ses enfants se chargent avant de se charger. Et comme <a-assets> est un enfant de <a-scene> , la scène doit effectivement attendre que tous les actifs soient chargés. Nous avons également ajouté une logique de chargement supplémentaire à <a-entity> sorte qu'ils attendent explicitement le chargement de <a-assets> si nous avons défini <a-assets> .

<a-asset-item> utilise THREE.FileLoader pour récupérer des fichiers. three.js stocke les données renvoyées dans THREE.Cache . Chaque loader three.js hérite de THREE.FileLoader , qu'il s'agisse d'un ColladaLoader , d'un OBJLoader , d'un ImageLoader , etc. Ils ont tous accès et connaissent le THREE.Cache central. Si A-Frame a déjà récupéré un fichier, A-Frame ne tentera pas de le récupérer à nouveau.

Ainsi, puisque nous bloquons l'initialisation des entités sur les actifs, à la charge des entités temporelles, tous les actifs ont déjà été récupérés. Tant que nous définissons <a-asset-item> et que l'entité récupère des fichiers en utilisant un formulaire THREE.FileLoader , la mise en cache fonctionnera automatiquement.

Accéder au FileLoader et au cache

Pour accéder au FileLoader FileLoader si nous voulons écouter de plus près:

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

Pour accéder au cache qui stocke les réponses XHR:

console.log(THREE.Cache);