aframe
Componentes

En el patrón entidad-componente-sistema, un componente es una porción de datos reutilizable y modular que conectamos en una entidad para agregar apariencia, comportamiento y / o funcionalidad.

En A-Frame, los componentes modifican las entidades que son objetos 3D en la escena. Mezclamos y componemos componentes para construir objetos complejos. Nos permiten encapsular el código three.js y JavaScript en módulos que podemos usar declarativamente desde HTML. Los componentes son aproximadamente análogos a CSS.

Definición de los métodos de manejo del ciclo de vida

Con el esquema siendo la anatomía, los métodos del ciclo de vida son la fisiología; el esquema define la forma de los datos, los métodos del manejador del ciclo de vida usan los datos para modificar la entidad. Los manejadores generalmente interactuarán con la API de la entidad .

Resumen de los métodos

Propiedades de prototipo de componente

Dentro de los métodos, tenemos acceso al prototipo del componente a través de this :

Metodos

.en eso ()

.init () se llama una vez al principio del ciclo de vida del componente. Una entidad puede llamar al controlador de init del componente:

• Cuando el componente se establece estáticamente en la entidad en el archivo HTML y la página se carga.
• Cuando el componente se establece en una entidad adjunta a través de setAttribute .
• Cuando el componente se establece en una entidad no adjunta, y la entidad se adjunta a la escena a través de appendChild .

El controlador de init se suele utilizar para:

• Configurar el estado inicial y las variables.
• Métodos de unión
• Adjuntar oyentes de eventos

Por ejemplo, la init un componente del cursor establecería variables de estado, métodos de enlace y agregaría escuchas de eventos:

AFRAME.registerComponent('cursor', {
  // ...
  init: function () {
    // Set up initial state and variables.
    this.intersection = null;
    // Bind methods.
    this.onIntersection = AFRAME.utils.bind(this.onIntersection, this);
    // Attach event listener.
    this.el.addEventListener('raycaster-intersection', this.onIntersection);
  }
  // ...
});

.update (oldData)

.update (oldData) cada vez que cambian las propiedades del componente, incluso al comienzo del ciclo de vida del componente. Una entidad puede llamar al controlador de update un componente:

• Después de llamar a init () , al comienzo del ciclo de vida del componente.
• Cuando las propiedades del componente se actualizan con .setAttribute .

El controlador de update se utiliza a menudo para:

• Haga la mayor parte del trabajo para hacer modificaciones a la entidad, utilizando this.data .
• Modifique la entidad siempre que cambien una o más propiedades del componente.

Las modificaciones granulares de la entidad pueden realizarse [difingir] [dif] el conjunto de datos actual ( this.data ) con el conjunto de datos anterior antes de la actualización ( oldData ).

A-Frame llama a .update() tanto al principio del ciclo de vida de un componente como cada vez que los datos de un componente cambian (por ejemplo, como resultado de setAttribute ). El controlador de actualización a menudo utiliza this.data para modificar la entidad. El controlador de actualización tiene acceso al estado anterior de los datos de un componente a través de su primer argumento. Podemos usar los datos anteriores de un componente para indicar exactamente qué propiedades se modificaron para hacer actualizaciones granulares.

Por ejemplo, la update del componente visible establece la visibilidad de la entidad.

AFRAME.registerComponent('visible', {
  /**
   * this.el is the entity element.
   * this.el.object3D is the three.js object of the entity.
   * this.data is the component's property or properties.
   */
  update: function (oldData) {
    this.el.object3D.visible = this.data;
  }
  // ...
});

.retirar ()

.remove () se llama cuando el componente se separa de la entidad. Una entidad puede llamar al controlador de remove un componente:

• Cuando el componente se elimina de la entidad a través de removeAttribute .
• Cuando la entidad se separa de la escena (por ejemplo, removeChild ).

El controlador de remove se utiliza a menudo para:

• Eliminar, deshacer o limpiar todas las modificaciones del componente a la entidad.
• Separar a los oyentes del evento.

Por ejemplo, cuando se elimina el [componente de luz] [luz], el componente de luz eliminará el objeto de luz que había colocado previamente en la entidad, eliminándolo así de la escena.

AFRAME.registerComponent('light', {
  // ...
  remove: function () {
    this.el.removeObject3D('light');
  }
  // ...
});

.tick (time, timeDelta)

Se llama a .tick () en cada tic o trama del bucle de renderizado de la escena. La escena llamará al manejador de tick un componente:

• En cada cuadro del bucle de render.
• Del orden de 60 a 120 veces por segundo.
• Si la entidad o escena no está en pausa (por ejemplo, el Inspector está abierto).
• Si la entidad todavía está vinculada a la escena.

El controlador de tick se utiliza a menudo para:

• Modificar continuamente la entidad en cada marco o en un intervalo.
• Encuesta de condiciones.

El controlador de tick se proporciona el tiempo de actividad global de la escena en milisegundos ( time ) y la diferencia de tiempo en milisegundos desde el último fotograma ( timeDelta ). Se pueden usar para interpolación o solo para ejecutar partes del controlador de tick en un intervalo establecido.

Por ejemplo, el componente de controles rastreados progresará las animaciones del controlador, actualizará la posición y la rotación del controlador y verificará si se presionan los botones.

AFRAME.registerComponent('tracked-controls', {
  // ...
  tick: function (time, timeDelta) {
    this.updateMeshAnimation();
    this.updatePose();
    this.updateButtons();
  }
  // ...
});

.pause ()

.pause () cuando la entidad o escena se detiene. La entidad puede llamar al controlador de pause un componente:

• Antes de eliminar el componente, antes de llamar al controlador de remove .
• Cuando la entidad está en pausa con Entity.pause () .
• Cuando la escena está en pausa con Scene.pause () (por ejemplo, se abre el Inspector).

El controlador de pause se utiliza a menudo para:

• Eliminar oyentes de eventos.
• Eliminar cualquier posibilidad de comportamiento dinámico.

Por ejemplo, el componente de sonido pausará el sonido y eliminará un detector de eventos que haya reproducido un sonido en un evento:

AFRAME.registerComponent('sound', {
  // ...
  pause: function () {
    this.pauseSound();
    this.removeEventListener();
  }
  // ...
});

.jugar ()

.play () cuando se reanuda la entidad o la escena. La entidad puede llamar al controlador de play un componente:

• Cuando el componente se adjunta por primera vez, después de llamar al controlador de update .
• Cuando la entidad se detuvo, pero luego se reanudó con Entity.play () .
• Cuando la escena se detuvo, pero luego se reanudó con Scene.play () .

El controlador de play suele utilizarse para:

• Añadir oyentes de eventos.

Por ejemplo, el componente de sonido reproducirá el sonido y actualizará el detector de eventos que reproducirá un sonido en un evento:

AFRAME.registerComponent('sound', {
  // ...
  play: function () {
    if (this.data.autoplay) { this.playSound(); }
    this.updateEventListener();
  }
  // ...
});

.updateSchema (datos)

.updateSchema () , si está definido, se llama en cada actualización para verificar si el esquema necesita ser modificado dinámicamente.

El controlador updateSchema se usa a menudo para:

• Actualice o extienda dinámicamente el esquema, generalmente dependiendo del valor de una propiedad.

Por ejemplo, el componente de geometría verifica si la propiedad primitive cambió para determinar si actualizar el esquema para un tipo diferente de geometría:

AFRAME.registerComponent('geometry', {
  // ...
  updateSchema: (newData) {
    if (newData.primitive !== this.data.primitive) {
      this.extendSchema(GEOMETRIES[newData.primitive].schema);
    }
  }
  // ...
});

MÉTODOS DE PROTOTIPO DE COMPONENTES

.flushToDOM ()

Para ahorrar tiempo de CPU en la cadena de caracteres, A-Frame solo actualizará en modo de depuración la representación serializada del componente en el DOM real. Al llamar a flushToDOM () se serializarán manualmente los datos del componente y se actualizará el DOM:

document.querySelector('[geometry]').components.geometry.flushToDOM();