aframe
Tafereel

Invoering

parameters

Opmerkingen

Scènecomponenten aansluiten

Zowel componenten als entiteiten kunnen aan de scène worden gekoppeld. A-Frame wordt geleverd met een paar componenten om de scène te configureren:

Ingesloten scènes gebruiken

Als u WebVR-inhoud wilt gebruiken gemengd met HTML-inhoud, bijvoorbeeld wanneer u een uitgebreide showcase-inhoud maakt, kunt u de embedded tag gebruiken. Wanneer u dit gebruikt, is het mogelijk om rond te kijken in 360 ° -inhoud met behulp van de gyroscoop van uw smartphone of klik en sleep op de computer.

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

debug

De component debug maakt serienummering van component naar DOM mogelijk.

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

Serienummercomponent-naar-DOM

Om prestatieredenen werkt A-Frame standaard de DOM niet bij met componentgegevens. Als we de DOM-inspecteur van de browser openen, zien we dat alleen de componentnamen (en niet de waarden) zichtbaar zijn.

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

A-Frame slaat de componentgegevens op in het geheugen. Het bijwerken van de DOM kost CPU-tijd voor het converteren van interne componentgegevens naar tekenreeksen. Als we de DOM-update voor foutopsporing willen zien, kunnen we de foutopsporingscomponent aan de scène toevoegen. Componenten controleren op een ingeschakelde foutopsporingscomponent voordat ze proberen te serialiseren naar de DOM. Dan kunnen we componentgegevens in de DOM bekijken:

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

Zorg ervoor dat dit component niet actief is in productie.

Handmatig serialiseren naar DOM

Gebruik Entity.flushToDOM of Component.flushToDOM om handmatig naar DOM te serialiseren:

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.

Content-scripts uitvoeren op de scène

De aanbevolen manier is om een component te schrijven en deze aan het scene-element te koppelen.
De scène en zijn kinderen worden vóór dit onderdeel geïnitialiseerd.

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

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

Als u om een bepaalde reden liever geen speciaal onderdeel wilt schrijven, moet u wachten tot de scène is geïnitialiseerd en gekoppeld:

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