aframe
Scena

Wprowadzenie

Parametry

Uwagi

Dołączanie elementów sceny

Komponenty mogą być dołączane do sceny, a także byty. Rama A jest dostarczana z kilkoma komponentami do skonfigurowania sceny:

Korzystanie ze scen osadzonych

Jeśli chcesz używać zawartości WebVR zmieszanej z treścią HTML, na przykład podczas tworzenia rozszerzonej zawartości kluczowej prezentacji, możesz użyć embedded znacznika. Podczas korzystania z niego można rozejrzeć się po treści 360 ° za pomocą żyroskopu smartfona lub kliknąć i przeciągnąć na komputerze.

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

Odpluskwić

Komponent debugujący umożliwia serializację między komponentami DOM.

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

Serializacja Component-DOM

Domyślnie, ze względu na wydajność, A-Frame nie aktualizuje DOM danymi składowymi. Jeśli otworzymy inspektora DOM przeglądarki, zobaczymy tylko nazwy komponentów (a nie wartości).

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

A-Frame przechowuje dane komponentu w pamięci. Aktualizacja DOM wymaga czasu procesora na konwersję wewnętrznych danych komponentów na ciągi. Jeśli chcemy zobaczyć aktualizację DOM w celu debugowania, możemy dołączyć składnik debugujący do sceny. Komponenty sprawdzą, czy jest włączony składnik debugowania, przed próbą serializacji do DOM. Następnie będziemy mogli wyświetlić dane komponentu w DOM:

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

Upewnij się, że ten komponent nie jest aktywny w produkcji.

Ręczna serializacja do DOM

Aby ręcznie serializować do DOM, użyj Entity.flushToDOM lub 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.

Uruchamianie skryptów treści na scenie

Zalecanym sposobem jest napisanie komponentu i dołączenie go do elementu sceny.
Scena i jej dzieci zostaną zainicjowane przed tym komponentem.

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

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

Jeśli z jakiegoś szczególnego powodu nie chcesz pisać dedykowanego komponentu, musisz poczekać, aż scena zakończy się inicjalizacją i dołączeniem:

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