aframe
Scena

introduzione

Parametri

Osservazioni

Collegamento di componenti di scena

I componenti possono essere collegati alla scena e alle entità. A-Frame viene fornito con alcuni componenti per configurare la scena:

Utilizzo di scene incorporate

Se si desidera utilizzare contenuto WebVR combinato con contenuto HTML, ad esempio quando si crea un contenuto chiave di showcase esteso, è possibile utilizzare il tag embedded . Quando lo usi, è possibile guardarsi intorno all'interno di un contenuto a 360 ° usando il giroscopio dello smartphone o fare clic e trascinare sul 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>

mettere a punto

Il componente di debug abilita la serializzazione da componente a DOM.

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

Serializzazione da componente a DOM

Per impostazione predefinita, per motivi di prestazioni, A-Frame non aggiorna il DOM con i dati del componente. Se apriamo l'ispettore DOM del browser, vedremo solo i nomi dei componenti (e non i valori) visibili.

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

A-Frame memorizza i dati del componente in memoria. L'aggiornamento del DOM richiede tempo di CPU per convertire i dati dei componenti interni in stringhe. Se vogliamo vedere l'aggiornamento DOM a scopo di debug, possiamo allegare il componente di debug alla scena. I componenti controlleranno la presenza di un componente debug abilitato prima di provare a serializzare sul DOM. Quindi saremo in grado di visualizzare i dati dei componenti nel DOM:

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

Assicurarsi che questo componente non sia attivo nella produzione.

Serializzazione manuale su DOM

Per serializzare manualmente su DOM, utilizzare Entity.flushToDOM o 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.

Esecuzione di script di contenuto sulla scena

Il metodo consigliato è scrivere un componente e collegarlo all'elemento scene.
La scena e i suoi figli verranno inizializzati prima di questo componente.

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

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

Se per qualche ragione particolare preferisci non scrivere un componente dedicato, devi aspettare che la scena finisca di inizializzare e allegare:

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