aframe
Scène

Introduction

Paramètres

Remarques

Connexion de composants de scène

Des composants peuvent être attachés à la scène ainsi que des entités. A-Frame est livré avec quelques composants pour configurer la scène:

Utilisation de scènes incorporées

Si vous souhaitez utiliser un contenu WebVR mélangé à du contenu HTML, par exemple lorsque vous créez un contenu de clé de présentation étendue, vous pouvez utiliser la balise embedded . Lorsque vous utilisez ceci, il est possible de regarder à l'intérieur du contenu à 360 ° à l'aide du gyroscope de votre smartphone ou de cliquer et de glisser sur l'ordinateur.

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

Déboguer

Le composant de débogage permet la sérialisation de composant à DOM.

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

Sérialisation de composant à DOM

Par défaut, pour des raisons de performances, A-Frame ne met pas à jour le DOM avec les données de composant. Si nous ouvrons l'inspecteur DOM du navigateur, nous verrons que seuls les noms des composants (et non les valeurs) sont visibles.

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

A-Frame stocke les données du composant en mémoire. La mise à jour du DOM prend du temps processeur pour convertir les données de composant internes en chaînes. Si nous voulons voir la mise à jour du DOM à des fins de débogage, nous pouvons attacher le composant de débogage à la scène. Les composants rechercheront un composant de débogage activé avant d'essayer de sérialiser vers le DOM. Nous pourrons alors afficher les données des composants dans le DOM:

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

Assurez-vous que ce composant n'est pas actif dans la production.

Sérialisation manuelle dans DOM

Pour sérialiser manuellement vers DOM, utilisez Entity.flushToDOM ou 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.

Exécution de scripts de contenu sur la scène

La méthode recommandée consiste à écrire un composant et à l'attacher à l'élément de la scène.
La scène et ses enfants seront initialisés avant ce composant.

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

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

Si, pour une raison particulière, vous préférez ne pas écrire un composant dédié, vous devez attendre que la scène ait fini de s'initialiser et de joindre:

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