aframe
Система управления активами

Вступление

замечания

Пример использования активов

Мы размещаем активы в <a-assets> , и помещаем <a-assets> в <a-scene> . Активы включают:

• <a-asset-item> - Различные активы, такие как 3D-модели и материалы
• <audio> - Звуковые файлы
• <img> - Текстуры изображений
• <video> - Видео текстуры

Сцена не будет отображаться или инициализироваться до тех пор, пока браузер не выберет (или не устранит ошибки) все активы или система активов достигнет таймаута.

Мы можем определить наши активы в <a-assets> и указать на эти активы у наших объектов с помощью селекторов:

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

Сцена и ее объекты будут ждать каждого актива (вплоть до таймаута) до инициализации и рендеринга.

Совместное использование ресурсов (CORS)

Поскольку A-Frame извлекает активы с использованием XHR , для обеспечения безопасности браузера браузер должен обслуживать активы с заголовками совместного использования ресурсов (CORS), если актив находится в другом домене. В противном случае нам придется размещать активы в том же самом происхождении, что и сцена.

Для некоторых опций GitHub Pages обслуживает все с заголовками CORS. Мы рекомендуем GitHub Pages в качестве простой платформы развертывания. Или вы также можете загружать активы с помощью программы A-Frame + Uploadcare Uploader , которая обслуживает файлы с набором заголовков CORS.

Учитывая , что заголовки CORS установлены, <a-assets> автоматически устанавливается crossorigin атрибуты медиа - элементов (например, <audio> , <img> , <video> ) , если он обнаруживает , что ресурс находится на другом домене.

Предварительная загрузка аудио и видео

Атрибуты аудио и видео будут блокировать сцену только в том случае, если мы установили autoplay или если мы установили 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>

Установка таймаута

Мы можем установить таймаут, который, когда он будет достигнут, начнет рендеринг сцены, и объекты начнут инициализацию независимо от того, загружены ли все активы. Таймаут по умолчанию - 3 секунды. Чтобы установить другой тайм-аут, мы просто передаем количество миллисекунд в атрибут timeout :

Если некоторым ресурсам требуется много времени для загрузки, мы можем установить соответствующий тайм-аут, чтобы пользователь не ожидал весь день, если их сеть была медленной.

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

Определение типа ответа

Содержимое, полученное с помощью <a-asset-item> будет возвращено как обычный текст. Если мы хотим использовать другой тип ответ , такие как arraybuffer , используйте <a-asset-item> «s response-type атрибут:

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

Как это работает внутри страны

Каждый элемент в A-Frame наследует от <a-node> , прототип AFRAME.ANode . ANode управляет загрузкой и порядком инициализации. Для инициализации элемента (будь то <a-assets> , <a-asset-item> , <a-scene> или <a-entity> ), его дети должны быть уже инициализированы. Узлы инициализируются снизу вверх.

<a-assets> - это ANode , и он ждет, пока его дети загрузятся до его загрузки. А поскольку <a-assets> является дочерним элементом <a-scene> , сцена должна эффективно ждать загрузки всех ресурсов. Мы также добавили дополнительную логику нагрузки в <a-entity> , чтобы они явно ожидали загрузки <a-assets> если мы определили <a-assets> .

<a-asset-item> использует THREE.FileLoader для извлечения файлов. three.js сохраняет возвращенные данные в THREE.Cache . Каждый загрузчик three.js наследует от THREE.FileLoader , являются ли они ColladaLoader , OBJLoader , ImageLoader и т. Д. И все они имеют доступ и знают о центральном THREE.Cache . Если A-Frame уже вытащил файл, A-Frame не попытается извлечь его снова.

Таким образом, поскольку мы блокируем инициализацию объекта на активах, то при загрузке объектов времени все активы уже будут получены. Пока мы определяем <a-asset-item> s, а объект THREE.FileLoader файлы с использованием какой-то формы THREE.FileLoader , то кеширование будет автоматически работать.

Доступ к FileLoader и FileLoader

Чтобы получить доступ к файловому загрузчику FileLoader если мы хотим более внимательно слушать:

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

Чтобы получить доступ к кешу, в котором хранятся ответы XHR:

console.log(THREE.Cache);