aframe
Sistema de gestión de activos

Introducción

Observaciones

Ejemplo de uso de activos

Colocamos activos dentro de <a-assets> , y colocamos <a-assets> dentro de <a-scene> . Los activos incluyen:

• <a-asset-item> - Activos diversos, como modelos y materiales 3D
• <audio> - Archivos de sonido
• <img> - Texturas de imagen
• <video> - Texturas de video

La escena no se renderizará o inicializará hasta que el navegador recupere (o produzca errores) todos los activos o el sistema de activos llegue al tiempo de espera.

Podemos definir nuestros activos en <a-assets> y señalar aquellos activos de nuestras entidades utilizando selectores:

<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 escena y sus entidades esperarán a cada activo (hasta el tiempo de espera) antes de inicializar y renderizar.

Intercambio de recursos de origen cruzado (CORS)

Dado que A-Frame recupera los activos que utilizan XHR , la seguridad del navegador requiere que el navegador sirva activos con encabezados de intercambio de recursos de origen cruzado (CORS) si el activo está en un dominio diferente. De lo contrario, tendríamos que alojar activos en el mismo origen que la escena.

Para algunas opciones, GitHub Pages sirve todo con encabezados CORS. Recomendamos GitHub Pages como una plataforma de implementación simple. O también puede cargar activos utilizando A-Frame + Uploadcare Uploader , un servicio que sirve archivos con los encabezados CORS establecidos.

Dado que los encabezados CORS están establecidos, <a-assets> establecerá automáticamente los atributos de origen crossorigin en los elementos de medios (por ejemplo, <audio> , <img> , <video> ) si detecta que el recurso está en un dominio diferente.

Precarga de Audio y Video

Los recursos de audio y video solo bloquearán la escena si configuramos la autoplay o si configuramos 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>

Establecer un tiempo de espera

Podemos establecer un tiempo de espera que cuando se alcance, la escena comenzará a renderizarse y las entidades comenzarán a inicializarse independientemente de si se han cargado todos los activos. El tiempo de espera predeterminado es de 3 segundos. Para establecer un tiempo de espera diferente, solo pasamos el número de milisegundos al atributo de timeout :

Si algunos activos tardan mucho tiempo en cargarse, es posible que deseemos establecer un tiempo de espera adecuado para que el usuario no esté esperando todo el día en caso de que su red sea 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>

Especificando el tipo de respuesta

El contenido obtenido por <a-asset-item> se devolverá como texto sin formato. Si queremos usar un tipo de respuesta diferente, como arraybuffer , use el atributo de response-type <a-asset-item> :

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

Cómo funciona internamente

Cada elemento en A-Frame hereda de <a-node> , el prototipo AFRAME.ANode . Control de ANode carga y orden de inicialización. Para que un elemento se inicialice (ya sea <a-assets> , <a-asset-item> , <a-scene> o <a-entity> ), sus elementos secundarios ya deben haberse inicializado. Los nodos se inicializan de abajo hacia arriba.

<a-assets> es un ANode , y espera a que sus hijos se carguen antes de cargarse. Y dado que <a-assets> es un hijo de <a-scene> , la escena debe esperar a que se carguen todos los activos. También agregamos lógica de carga adicional a <a-entity> modo que esperen explícitamente a que se carguen <a-assets> si hemos definido <a-assets> .

<a-asset-item> utiliza THREE.FileLoader para recuperar archivos. three.js almacena los datos devueltos en THREE.Cache . Cada cargador de three.js hereda de THREE.FileLoader , ya sea un ColladaLoader , OBJLoader , ImageLoader , etc. Y todos tienen acceso y conocen el THREE.Cache central. Si A-Frame ya recuperó un archivo, A-Frame no intentará recuperarlo nuevamente.

Por lo tanto, dado que bloqueamos la inicialización de entidades en los activos, para cuando las entidades se carguen, todos los activos ya se habrán recuperado. Siempre y cuando definamos <a-asset-item> s, y la entidad esté recuperando archivos con algún tipo de THREE.FileLoader , el almacenamiento en caché funcionará automáticamente.

Accediendo al FileLoader y al Cache

Para acceder a three.js FileLoader si queremos escuchar más de cerca:

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

Para acceder al caché que almacena respuestas XHR:

console.log(THREE.Cache);