aframe
Escena

Introducción

Parámetros

Observaciones

Adjuntar componentes de escena

Los componentes se pueden adjuntar a la escena, así como las entidades. A-Frame se envía con algunos componentes para configurar la escena:

Usando escenas incrustadas

Si desea usar contenido de WebVR mezclado con contenido HTML, por ejemplo, cuando está creando un contenido de clave de exhibición extendido, puede usar la etiqueta embedded . Cuando está usando esto, es posible mirar a su alrededor dentro del contenido de 360 ​​° usando el giroscopio de su teléfono inteligente o hacer clic y arrastrar en la computadora.

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

Depurar

El componente de depuración permite la serialización de componente a DOM.

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

Serialización componente a DOM

De forma predeterminada, por razones de rendimiento, A-Frame no actualiza el DOM con datos de componentes. Si abrimos el inspector DOM del navegador, veremos que solo los nombres de los componentes (y no los valores) están visibles.

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

A-Frame almacena los datos del componente en la memoria. Actualizar el DOM lleva tiempo de CPU para convertir datos de componentes internos a cadenas. Si queremos ver la actualización de DOM para fines de depuración, podemos adjuntar el componente de depuración a la escena. Los componentes buscarán un componente de depuración habilitado antes de intentar serializar el DOM. Entonces podremos ver los datos del componente en el DOM:

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

Asegúrese de que este componente no esté activo en la producción.

Serialización manual a DOM

Para serializar manualmente a DOM, use 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.

Ejecución de scripts de contenido en la escena

La forma recomendada es escribir un componente y adjuntarlo al elemento de la escena.
La escena y sus hijos serán inicializados antes de este componente.

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

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

Si, por alguna razón en particular, prefiere no escribir un componente dedicado, debe esperar a que la escena termine de inicializarse y adjuntarse:

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