aframe
Entidades

A-Frame representa una entidad a través del elemento <a-entity> . Como se define en el patrón entidad-componente-sistema, las entidades son objetos de marcador de posición a los que conectamos componentes para proporcionarles apariencia, comportamiento y funcionalidad.

Metodos

addState (stateName)

addState empujará un estado en la entidad. Esta emitirá el evento stateadded, y podemos comprobar el estado de lata su existencia utilizando .is:

entity.addEventListener('stateadded', function (evt) {
  if (evt.detail.state === 'selected') {
    console.log('Entity now selected!');
  }
});
entity.addState('selected');
entity.is('selected');  // >> true

emitir (nombre, detalle, burbujas)

emit emite un evento DOM personalizado en la entidad. Por ejemplo, podemos emitir un evento para activar una animación:

<a-entity>
  <a-animation attribute="rotation" begin="rotate" to="0 360 0"></a-animation>
</a-entity>

entity.emit('rotate');

También podemos pasar detalles del evento o datos como segundo argumento:

entity.emit('collide', { target: collidingEntity });

El evento burbujeará por defecto. Podemos decirle que no burbujee pasando falso por burbuja:

entity.emit('sink', null, false);

flushToDOM (recursivo)

flushToDOM serializará manualmente los datos de los componentes de una entidad y actualizará el DOM.

getAttribute (componentName)

getAttribute recupera datos de componentes analizados (incluidos mixins y valores predeterminados).

// <a-entity geometry="primitive: box; width: 3">
entity.getAttribute('geometry');
// >> {primitive: "box", depth: 2, height: 2, translate: "0 0 0", width: 3, ...}
entity.getAttribute('geometry').primitive;
// >> "box"
entity.getAttribute('geometry').height;
// >> 2
entity.getAttribute('position');
// >> {x: 0, y: 0, z: 0}

Si componentName no es el nombre de un componente registrado, getAttribute se comportará como lo haría normalmente:

// <a-entity data-position="0 1 1">
entity.getAttribute('data-position');
// >> "0 1 1"

getDOMAttribute (componentName)

getDOMAttribute recupera solo los datos de componentes analizados que están definidos explícitamente en el DOM o mediante setAttribute . Si componentName es el nombre de un componente registrado, getDOMAttribute devolverá solo los datos del componente definidos en el HTML como un objeto analizado. getDOMAttribute para componentes es la forma parcial de getAttribute ya que los datos de componentes devueltos no incluyen mixins aplicados o valores predeterminados:

Compare la salida del ejemplo anterior de getAttribute :

// <a-entity geometry="primitive: box; width: 3">
entity.getDOMAttribute('geometry');
// >> { primitive: "box", width: 3 }
entity.getDOMAttribute('geometry').primitive;
// >> "box"
entity.getDOMAttribute('geometry').height;
// >> undefined
entity.getDOMAttribute('position');
// >> undefined

getObject3D (tipo)

getObject3D busca un hijo TRES. Objeto 3D referenciado por tipo en object3DMap .

AFRAME.registerComponent('example-mesh', {
  init: function () {
     var el = this.el;
     el.getOrCreateObject3D('mesh', THREE.Mesh);
     el.getObject3D('mesh');  // Returns THREE.Mesh that was just created.
  }
});

getOrCreateObject3D (tipo, Constructor)

Si la entidad no tiene un THREE.Object3D registrado en el tipo , getOrCreateObject3D registrará un THREE.Object3D instanciado utilizando el Constructor pasado. Si la entidad tiene un THREE.Object3D registrado en tipo , getOrCreateObject3D actuará como getObject3D :

AFRAME.registerComponent('example-geometry', {
  update: function () {
    var mesh = this.el.getOrCreateObject3D('mesh', THREE.Mesh);
    mesh.geometry = new THREE.Geometry();
  }
});

pausa ()

pause () detendrá cualquier comportamiento dinámico definido por animaciones y componentes. Cuando pausamos una entidad, detendrá sus animaciones y llamará a Component.pause () en cada uno de sus componentes. Los componentes deciden implementar lo que sucede en la pausa, que a menudo es eliminar los escuchas de eventos. Una entidad llamará a pausa () en sus entidades secundarias cuando pausemos una entidad.

// <a-entity id="spinning-jumping-ball">
entity.pause();

Por ejemplo, el componente look-controls on pause eliminará los controladores de eventos que escuchan las entradas.

jugar ()

play () iniciará cualquier comportamiento dinámico definido por animaciones y componentes. Esto se llama automáticamente cuando el DOM adjunta una entidad. Cuando una entidad juega () , la entidad llama a play () en sus entidades secundarias.

entity.pause();
entity.play();

Por ejemplo, el componente de sonido en la reproducción comenzará a reproducir el sonido.

setAttribute (componentName, value, [propertyValue | clobber])

Si componentName no es el nombre de un componente registrado o si el componente es un componente de una sola propiedad, setAttribute se comporta como lo haría normalmente:

entity.setAttribute('visible', false);

Aunque si componentName es el nombre de un componente registrado, puede manejar un análisis especial para el valor. Por ejemplo, el componente de posición es un componente de una sola propiedad, pero su analizador de tipo de propiedad le permite tomar un objeto:

entity.setAttribute('position', { x: 1, y: 2, z: 3 });

setObject3D (tipo, obj)

setObject3D registrará el obj pasado, un THREE.Object3D , como tipo debajo del object3DMap de la entidad. A-Frame agrega obj como hijo del objeto raíz3D de la entidad.

AFRAME.registerComponent('example-orthogonal-camera', {
  update: function () {
    this.el.setObject3D('camera', new THREE.OrthogonalCamera());
  }
});

removeAttribute (componentName, propertyName)

Si componentName es el nombre de un componente registrado, junto con la eliminación del atributo del DOM, removeAttribute también separará el componente de la entidad, invocando el método de eliminación del ciclo de vida del componente.

entity.removeAttribute('goemetry');  // Detach the geometry component.
entity.removeAttribute('sound');  // Detach the sound component.

Si se proporciona propertyName , removeAttribute restablecerá el valor de propiedad de esa propiedad especificada por propertyName al valor predeterminado de la propiedad:

entity.setAttribute('material', 'color', 'blue');  // The color is blue.
entity.removeAttribute('material', 'color');  // Reset the color to the default value, white.

removeObject3D (tipo)

removeObject3D elimina el objeto especificado por tipo de THREE.Group de la entidad y, por lo tanto, de la escena. Esto actualizará el object3DMap de la entidad, estableciendo el valor de la clave de tipo en nulo . Esto generalmente se llama desde un componente, a menudo dentro del controlador de eliminación:

AFRAME.registerComponent('example-light', {
  update: function () {
    this.el.setObject3D('light', new THREE.Light());
    // Light is now part of the scene.
    // object3DMap.light is now a THREE.Light() object.
  },
  remove: function () {
    this.el.removeObject3D('light');
    // Light is now removed from the scene.
    // object3DMap.light is now null.
  }
});

removeState (stateName)

removeState sacará un estado de la entidad. Esto emitirá el evento stateremoved , y podemos verificar el estado de su eliminación mediante .is :

entity.addEventListener('stateremoved', function (evt) {
  if (evt.detail.state === 'selected') {
    console.log('Entity no longer selected.');
  }
});
entity.addState('selected');
entity.is('selected');  // >> true
entity.removeState('selected');
entity.is('selected');  // >> false

EVENTOS

DETALLES DEL EVENTO

A continuación se muestra lo que contiene el detalle del evento para cada evento: