aframe
Scen

Introduktion

parametrar

Anmärkningar

Fästa scenkomponenter

Komponenter kan anslutas till scenen såväl som enheter. A-Frame levereras med några få komponenter för att konfigurera scenen:

Använda inbäddade scener

Om du vill använda WebVR-innehåll blandat med HTML-innehåll, till exempel när du skapar ett utökat innehåll för nyckelfönster, kan du använda den embedded taggen. När du använder det här är det möjligt att titta runt i 360 ° -innehåll med hjälp av gyroskopet på din smartphone eller klicka och dra på datorn.

<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

Felsökningskomponenten möjliggör komponent-till-DOM-serialisering.

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

Seriellisering av komponent till DOM

Som standard uppdaterar A-Frame inte DOM med komponentdata av prestandaskäl. Om vi öppnar webbläsarens DOM-inspektör ser vi bara komponentnamnen (och inte värdena) synliga.

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

A-Frame lagrar komponentdata i minnet. Att uppdatera DOM tar CPU-tid för att konvertera interna komponentdata till strängar. Om vi vill se DOM-uppdateringen för felsökning kan vi fästa felsökningskomponenten till scenen. Komponenter kommer att leta efter en aktiverad felsökningskomponent innan de försöker serialisera till DOM. Då kommer vi att kunna se komponentdata i DOM:

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

Se till att den här komponenten inte är aktiv i produktionen.

Serialiserar manuellt till DOM

För att manuellt serialisera till DOM använder du Entity.flushToDOM eller 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.

Kör innehållsskript på scenen

Det rekommenderade sättet är att skriva en komponent och fästa den till scenelementet.
Scenen och dess barn kommer att initialiseras innan denna komponent.

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

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

Om du av någon särskild anledning föredrar att inte skriva en dedikerad komponent måste du vänta på att scenen ska slutföras och initialiseras:

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