aframe
Сцена

Вступление

параметры

замечания

Прикрепление компонентов сцены

Компоненты могут быть прикреплены к сцене, а также к объектам. A-Frame поставляется с несколькими компонентами для настройки сцены:

Использование встроенных сцен

Если вы хотите использовать содержимое WebVR, смешанное с содержимым HTML, например, когда вы создаете расширенный контент ключа витрины, вы можете использовать embedded тег. Когда вы используете это, вы можете осмотреть содержимое на 360 ° с помощью гироскопа вашего смартфона или щелкнуть мышью и перетащить компьютер.

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<div class="vrcontent">
  <a-scene embedded>
    <a-assets>
      <img id="sky" src="https://c1.staticflickr.com/5/4248/34705881091_37b5cf2d28_o.jpg" alt="" />
    </a-assets>

    <a-sky src="#sky"></a-sky>
  </a-scene>
</div>

<div class="overlay">
  <button class="calltoaction">Click me!</button>
</div>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti animi aliquid architecto quibusdam ipsum, debitis dolor mollitia. Quidem, cumque quos porro doloribus iure dolore illum, qui rem asperiores unde laboriosam.Dolorum tempora quam eveniet ea recusandae deserunt, velit similique. Cum sunt rerum beatae officiis qui sed molestiae et ullam quasi, harum maxime vel, aspernatur quidem molestias. Provident quae illo harum?Sunt expedita, repellat saepe vel accusamus odio. Alias, obcaecati harum earum inventore asperiores quaerat, sit autem nostrum. Sunt illo numquam, temporibus pariatur optio nam, expedita necessitatibus aliquid nemo maxime nisi. Praesentium corporis, ea sunt asperiores, recusandae animi, rem doloribus, possimus cum laudantium libero. Maiores a, iusto aspernatur reiciendis ratione sunt nisi, rem, quasi temporibus ullam non. Neque repellat facilis illo.Quibusdam reiciendis sunt tempora fuga deleniti, molestias temporibus doloremque. Nam sed consequatur consectetur ut tempora a nesciunt, perspiciatis dolorem reprehenderit modi enim at veritatis, excepturi voluptate quod, voluptatibus voluptas. Cum.Debitis, nesciunt, repellat voluptatem sapiente incidunt quidem asperiores reprehenderit vero quisquam placeat sunt voluptatibus velit. Consectetur atque voluptates, repellendus facere sequi ea totam quia quis non incidunt. Soluta, aut, provident. Eos sequi itaque dolorem atque ex id maiores dolor eaque libero iste deserunt ea voluptate minima cum laboriosam, qui animi, fuga suscipit necessitatibus vero, autem blanditiis, totam nulla. Quo, et. Quisquam commodi voluptatum dolorem aspernatur, distinctio et ullam laborum laboriosam quo nisi, praesentium quaerat ab excepturi. Illum harum doloremque, accusantium, beatae culpa assumenda laboriosam, quos mollitia aperiam dolorem praesentium minus!</p>
</div>

отлаживать

Компонент отладки обеспечивает сериализацию компонент-DOM.

<a-scene debug></a-scene>

Сериализация компонентов к DOM

По умолчанию, по соображениям производительности, A-Frame не обновляет DOM с данными компонента. Если мы откроем инспектор DOM браузера, мы увидим, что видны только имена компонентов (а не значения).

<a-entity geometry material position rotation></a-entity>

A-Frame хранит данные компонента в памяти. Обновление DOM занимает процессорное время для преобразования данных внутренних компонентов в строки. Если мы хотим увидеть обновление DOM для целей отладки, мы можем прикрепить компонент отладки к сцене. Компоненты проведут проверку включенного компонента отладки, прежде чем пытаться выполнить сериализацию в DOM. Затем мы сможем просматривать данные компонента в DOM:

<a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

Убедитесь, что этот компонент не активен в производстве.

Ручная сериализация в DOM

Для ручного сериализации в DOM используйте Entity.flushToDOM или Component.flushToDOM:

document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
document.querySelector('a-entity').flushToDOM();  // Flush an entity.
document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.

Запуск сценариев содержимого на сцену

Рекомендуемый способ - написать компонент и прикрепить его к элементу сцены.
Сцена и его дети будут инициализированы перед этим компонентом.

AFRAME.registerComponent('do-something', {
  init: function () {
    var sceneEl = this.el;
  }
});

<a-scene do-something></a-scene>

Если по какой-то определенной причине вы предпочитаете не писать выделенный компонент, вам нужно дождаться, когда сцена завершит инициализацию и присоединение:

var scene = document.querySelector('a-scene');

if (scene.hasLoaded) {
  run();
} else {
  scene.addEventListener('loaded', run);
}

function run () {
  var entity = scene.querySelector('a-entity');
  entity.setAttribute('material', 'color', 'red');
}