aframe
Entités

A-Frame représente une entité via l'élément <a-entity> . Comme défini dans le modèle d'entité composant-système, les entités sont des objets d'espace réservé auxquels nous connectons des composants pour leur fournir apparence, comportement et fonctionnalité.

Méthodes

addState (stateName)

addState poussera un état sur l'entité. Cela émettra l'événement stateadded , et nous pouvons vérifier l'état de l'existence à l'aide de .is :

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

émettre (nom, détail, bulles)

emit émet un événement DOM personnalisé sur l'entité. Par exemple, nous pouvons émettre un événement pour déclencher une animation:

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

entity.emit('rotate');

Nous pouvons également passer le détail de l’événement ou les données en second argument:

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

L'événement bouillonnera par défaut. on peut lui dire de ne pas faire de bulle en passant faux pour bulle:

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

flushToDOM (récursif)

flushToDOM va sérialiser manuellement les données des composants d'une entité et mettre à jour le DOM.

getAttribute (componentName)

getAttribute récupère les données du composant analysé (y compris les mixins et les valeurs par défaut).

// <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 n'est pas le nom d'un composant enregistré, getAttribute se comportera normalement:

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

getDOMAttribute (componentName)

getDOMAttribute récupère uniquement les données de composant analysées qui sont explicitement définies dans le DOM ou via setAttribute . Si componentName est le nom d'un composant enregistré, getDOMAttribute renverra uniquement les données de composant définies dans le code HTML en tant qu'objet analysé. getDOMAttribute pour les composants est la forme partielle de getAttribute puisque les données de composant renvoyées n'incluent pas les mixins appliqués ou les valeurs par défaut:

Comparez la sortie de l'exemple ci-dessus 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 (type)

getObject3D recherche un enfant THREE.Object3D référencé par type sur 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 (type, constructeur)

Si l'entité n'a pas de THREE.Object3D enregistré sous le type , getOrCreateObject3D enregistre une instance de THREE.Object3D à l'aide du constructeur transmis. Si l'entité a un THREE.Object3D enregistré sous le type , getOrCreateObject3D agira comme getObject3D :

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

pause ()

pause () arrêtera tout comportement dynamique défini par les animations et les composants. Lorsque nous suspendons une entité, elle arrête ses animations et appelle Component.pause () sur chacun de ses composants. Les composants décident d’implémenter ce qui se produit lors de la pause, ce qui supprime souvent les écouteurs d’événement. Une entité appelle pause () sur ses entités enfants lorsque nous suspendons une entité.

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

Par exemple, le composant look-controls en pause supprimera les gestionnaires d'événements qui écoutent les entrées.

jouer ()

play () démarrera tout comportement dynamique défini par des animations et des composants. Ceci est automatiquement appelé lorsque le DOM attache une entité. Lorsqu'une entité play () , l'entité appelle play () sur ses entités enfants.

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

Par exemple, le composant audio en cours de lecture commence à jouer le son.

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

Si componentName n'est pas le nom d'un composant enregistré ou si le composant est un composant à propriété unique, setAttribute se comporte normalement:

entity.setAttribute('visible', false);

Bien que componentName soit le nom d'un composant enregistré, il peut gérer une analyse spéciale pour la valeur. Par exemple, le composant position est un composant à propriété unique, mais son analyseur de type de propriété lui permet de prendre un objet:

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

setObject3D (type, obj)

setObject3D enregistrera l'obj passé, un THREE.Object3D, le type sous la object3DMap de l'entité. A-Frame ajoute obj en tant qu'enfant de la racine object3D de l'entité.

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

removeAttribute (componentName, propertyName)

Si componentName est le nom d'un composant enregistré, avec la suppression de l'attribut du DOM, removeAttribute détachera également le composant de l'entité en invoquant la méthode du cycle de vie de suppression du composant.

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

Si propertyName est donné, removeAttribute réinitialisera la valeur de propriété de cette propriété spécifiée par propertyName à la valeur par défaut de la propriété:

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

removeObject3D (type)

removeObject3D supprime l'objet spécifié par type de THREE.Group de l'entité et donc de la scène. Cela mettra à jour l'objet object3DMap de l'entité, en définissant la valeur de la clé de type sur null . Ceci est généralement appelé à partir d'un composant, souvent dans le gestionnaire de suppression:

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 fera apparaître un état de l'entité. Cela va émettre l'événement stateremoved , et nous pouvons vérifier l'état de sa suppression en utilisant .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

ÉVÉNEMENTS

DÉTAILS DE L'ÉVÈNEMENT

Voici ce que contient le détail de l'événement pour chaque événement: