Recherche…


Introduction

A-Frame dispose d'un système de gestion des actifs qui nous permet de placer nos actifs au même endroit et de précharger et mettre en cache les actifs pour de meilleures performances.

Les jeux et les expériences 3D riches préchargent traditionnellement leurs ressources, telles que les modèles ou les textures, avant de rendre leurs scènes. Cela garantit que les ressources ne manquent pas visuellement, ce qui est bénéfique pour les performances afin de garantir que les scènes n'essayent pas de récupérer des actifs lors du rendu.

Remarques

Événements

Comme <a-assets> et <a-asset-item> sont des nœuds dans A-Frame, ils émettront l'événement loaded lorsqu'ils déclarent avoir terminé leur chargement.

Nom de l'événement La description
chargé Tous les actifs ont été chargés ou les ressources ont expiré.
temps libre Les actifs ont expiré.

Avancer la charge sur les actifs individuels

<a-asset-item>

<a-asset-item> appelle le FileLoader three.js . Nous pouvons utiliser <a-asset-item> pour tout type de fichier. Une fois terminé, il définira son membre de data avec la réponse au texte.

Nom de l'événement La description
Erreur Erreur de récupération Le détail de l'événement contient xhr avec l'instance XMLHttpRequest .
le progrès Emis sur le progrès. Les détails de l'événement contiennent xhr avec l'instance XMLHttpRequest , loadedBytes et totalBytes .
chargé L'actif désigné par src était chargé.

<img>

Les images sont un élément DOM standard afin que nous puissions écouter les événements DOM standard.

Nom de l'événement La description
charge L'image a été chargée.

HTMLMediaElement

Les ressources audio et vidéo sont HTMLMediaElement s. Le navigateur déclenche des événements particuliers sur ces éléments; noté ici pour plus de commodité:

Nom de l'événement La description
Erreur Une erreur s'est produite lors du chargement de l'actif.
loadeddata Le progrès.
le progrès Le progrès.

A-Frame utilise ces événements de progression, en comparant le temps passé par le navigateur sur la durée de l'actif, afin de détecter le moment où l'actif est chargé.

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


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow