aframe
Szene

Einführung

Parameter

Bemerkungen

Szenenkomponenten anbringen

Komponenten können sowohl an die Szene als auch an Objekte angehängt werden. A-Frame wird mit wenigen Komponenten zur Konfiguration der Szene geliefert:

Eingebettete Szenen verwenden

Wenn Sie WebVR-Inhalte, die mit HTML-Inhalt gemischt sind, verwenden möchten, beispielsweise wenn Sie einen erweiterten Inhalt eines Showcase-Schlüssels erstellen, können Sie das embedded Tag verwenden. Wenn Sie dies verwenden, können Sie sich mit dem Gyroskop Ihres Smartphones in 360 ° -Inhalten umsehen oder auf den Computer klicken und ziehen.

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

Debuggen

Die Debug-Komponente ermöglicht die Serialisierung von Komponente zu DOM.

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

Komponenten-zu-DOM-Serialisierung

Aus Performancegründen aktualisiert A-Frame das DOM standardmäßig nicht mit Komponentendaten. Wenn wir den DOM-Inspector des Browsers öffnen, werden nur die Komponentennamen (und nicht die Werte) angezeigt.

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

A-Frame speichert die Komponentendaten im Speicher. Das Aktualisieren des DOM benötigt CPU-Zeit für die Konvertierung interner Komponentendaten in Strings. Wenn wir das DOM-Update für Debugging-Zwecke anzeigen möchten, können wir die Debug-Komponente an die Szene anhängen. Komponenten prüfen, ob eine aktivierte Debug-Komponente vorhanden ist, bevor sie versuchen, die DOM zu serialisieren. Dann können wir Komponentendaten im DOM anzeigen:

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

Stellen Sie sicher, dass diese Komponente in der Produktion nicht aktiv ist.

Manuelles Serialisieren in DOM

Um die DOM manuell zu serialisieren, verwenden Sie Entity.flushToDOM oder 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.

Ausführen von Content-Skripts in der Szene

Die empfohlene Methode ist, eine Komponente zu schreiben und sie an das Szenenelement anzuhängen.
Die Szene und ihre Kinder werden vor dieser Komponente initialisiert.

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

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

Wenn Sie aus bestimmten Gründen keine dedizierte Komponente schreiben möchten, müssen Sie warten, bis die Szene das Initialisieren und Anfügen abgeschlossen hat:

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