aframe
Composants

Dans le modèle entité-composant-système, un composant est un bloc de données réutilisable et modulaire que nous connectons à une entité pour ajouter une apparence, un comportement et / ou une fonctionnalité.

Dans A-Frame, les composants modifient des entités qui sont des objets 3D dans la scène. Nous mélangeons et composons des composants pour construire des objets complexes. Ils nous ont permis d’encapsuler three.js et le code JavaScript dans des modules que nous pouvons utiliser de manière déclarative à partir de HTML. Les composants sont à peu près analogues à CSS.

Méthodes de gestion du cycle de vie des définitions

Le schéma étant l'anatomie, les méthodes du cycle de vie sont la physiologie; le schéma définit la forme des données, les méthodes du gestionnaire de cycle de vie utilisent les données pour modifier l'entité. Les gestionnaires interagissent généralement avec l' API Entity .

Vue d'ensemble des méthodes

Propriétés du prototype de composant

Dans les méthodes, nous avons accès au composant prototype via this :

Méthodes

.init ()

.init () est appelée une fois au début du cycle de vie du composant. Une entité peut appeler le gestionnaire d' init du composant:

• Lorsque le composant est défini de manière statique sur l'entité dans le fichier HTML et que la page est chargée.
• Lorsque le composant est défini sur une entité attachée via setAttribute .
• Lorsque le composant est défini sur une entité non attachée et que l'entité est alors attachée à la scène via appendChild .

Le gestionnaire d' init est souvent utilisé pour:

• Configurer l'état initial et les variables
• Méthodes de liaison
• Joindre des écouteurs d'événement

Par exemple, l' init un composant de curseur définirait des variables d'état, lierait des méthodes et ajouterait des écouteurs d'événement:

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) est appelée chaque fois que les propriétés du composant sont modifiées, y compris au début du cycle de vie du composant. Une entité peut appeler le gestionnaire de update un composant:

• Une fois init () appelé, au début du cycle de vie du composant.
• Lorsque les propriétés du composant sont mises à jour avec .setAttribute .

Le gestionnaire de update est souvent utilisé pour:

• Faites le gros du travail pour apporter des modifications à l’entité, en utilisant this.data .
• Modifiez l'entité chaque fois qu'une ou plusieurs propriétés de composant sont modifiées.

Des modifications granulaires de l'entité peuvent être effectuées en [différant] [diff] le jeu de données actuel ( this.data ) avec le jeu de données précédent avant la mise à jour ( oldData ).

A-Frame appelle .update() à la fois au début du cycle de vie d'un composant et à chaque modification des données d'un composant (par exemple, à la suite de setAttribute ). Le gestionnaire de mise à jour utilise souvent this.data pour modifier l'entité. Le gestionnaire de mise à jour a accès à l'état précédent des données d'un composant via son premier argument. Nous pouvons utiliser les données précédentes d'un composant pour déterminer exactement les propriétés modifiées pour effectuer des mises à jour granulaires.

Par exemple, la update du composant visible définit la visibilité de l'entité.

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;
  }
  // ...
});

.retirer ()

.remove () est appelée chaque fois que le composant est détaché de l'entité. Une entité peut appeler le gestionnaire de remove un composant:

• Lorsque le composant est supprimé de l'entité via removeAttribute .
• Lorsque l'entité est détachée de la scène (par exemple, removeChild ).

Le gestionnaire de remove est souvent utilisé pour:

• Supprimez, annulez ou nettoyez toutes les modifications apportées au composant dans l'entité.
• Détachez les écouteurs d'événements.

Par exemple, lorsque le composant [light] [light] est supprimé, le composant light supprime l’objet lumineux qu’il a précédemment défini sur l’entité, le supprimant ainsi de la scène.

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

.tick (heure, timeDelta)

.tick () est appelé à chaque tick ou frame de la boucle de rendu de la scène. La scène appellera le gestionnaire de tick un composant:

• Sur chaque image de la boucle de rendu.
• De l’ordre de 60 à 120 fois par seconde.
• Si l'entité ou la scène n'est pas en pause (par exemple, l'inspecteur est ouvert).
• Si l'entité est toujours attachée à la scène.

Le gestionnaire de tick est souvent utilisé pour:

• Modifier continuellement l'entité sur chaque image ou sur un intervalle.
• Sondage pour les conditions.

La tick gestionnaire est fourni le temps de fonctionnement global de la scène en millisecondes ( time ) et la différence de temps en millisecondes depuis la dernière image ( timeDelta ). Ceux - ci peuvent être utilisés pour l' interpolation ou seulement des parties d'exécution de la tick gestionnaire sur un intervalle défini.

Par exemple, le composant des contrôles suivis fera progresser les animations du contrôleur, mettra à jour la position et la rotation du contrôleur et vérifiera si les boutons sont pressés.

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

.pause ()

.pause () est appelée lorsque l'entité ou la scène est en pause. L'entité peut appeler le gestionnaire de pause un composant:

• Avant la suppression du composant, avant l'appel du gestionnaire de remove .
• Lorsque l'entité est en pause avec Entity.pause () .
• Lorsque la scène est mise en pause avec Scene.pause () (par exemple, l'inspecteur est ouvert).

Le gestionnaire de pause est souvent utilisé pour:

• Supprimer les écouteurs d'événement.
• Supprimer toutes les chances de comportement dynamique.

Par exemple, le composant audio mettra le son en pause et supprimera un écouteur d'événement qui aurait joué un son lors d'un événement:

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

.jouer ()

.play () est appelée lorsque l'entité ou la scène reprend. L'entité peut appeler le gestionnaire de play un composant:

• Lorsque le composant est connecté pour la première fois, après l'appel du gestionnaire de update .
• Lorsque l'entité a été mise en pause mais a ensuite repris avec Entity.play () .
• Lorsque la scène a été mise en pause, puis reprise avec Scene.play () .

Le gestionnaire de play est souvent utilisé pour:

• Ajouter des écouteurs d'événement.

Par exemple, le composant audio jouera le son et mettra à jour l’écouteur d’événement qui émettra un son lors d’un événement:

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

.updateSchema (data)

.updateSchema () , s'il est défini, est appelé à chaque mise à jour pour vérifier si le schéma doit être modifié dynamiquement.

Le gestionnaire updateSchema est souvent utilisé pour:

• Mettre à jour ou étendre dynamiquement le schéma, généralement en fonction de la valeur d'une propriété.

Par exemple, le composant géométrique vérifie si la propriété primitive modifiée pour déterminer s'il faut mettre à jour le schéma pour un type de géométrie différent:

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

METHODES DE PROTOTYPE DE COMPOSANTS

.flushToDOM ()

Pour économiser sur le temps de calcul de la chaîne, A-Frame ne mettra à jour en mode débogage que la représentation sérialisée du composant dans le DOM réel. L'appel de flushToDOM () sérialisera manuellement les données du composant et mettra à jour le DOM:

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