aframe
componenti

Nel modello del sistema di entità-componente, un componente è una porzione di dati riutilizzabile e modulare che viene inserita in un'entità per aggiungere aspetto, comportamento e / o funzionalità.

In A-Frame, i componenti modificano le entità che sono oggetti 3D nella scena. Mescoliamo e componiamo i componenti insieme per costruire oggetti complessi. Ci permettono di incapsulare three.js e il codice JavaScript in moduli che possiamo usare in modo dichiarativo da HTML. I componenti sono approssimativamente analoghi ai CSS.

Metodi di gestione del ciclo di vita delle definizioni

Poiché lo schema è l'anatomia, i metodi del ciclo di vita sono la fisiologia; lo schema definisce la forma dei dati, i metodi del gestore del ciclo di vita utilizzano i dati per modificare l'entità. I gestori di solito interagiscono con l' API Entity .

Panoramica dei metodi

Proprietà del prototipo del componente

All'interno dei metodi, abbiamo accesso al prototipo del componente tramite this :

METODI

.dentro ()

.init () viene chiamato una volta all'inizio del ciclo di vita del componente. Un'entità può chiamare il gestore init del componente:

• Quando il componente è impostato staticamente sull'entità nel file HTML e la pagina viene caricata.
• Quando il componente è impostato su un'entità collegata tramite setAttribute .
• Quando il componente è impostato su un'entità non collegata, e l'entità viene quindi allegata alla scena tramite appendChild .

Il gestore di init è spesso usato per:

• Imposta lo stato iniziale e le variabili
• Metodi di legatura
• Allega ascoltatori di eventi

Ad esempio, init di un componente del cursore imposterà variabili di stato, metodi di associazione e aggiungerà listener di eventi:

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) viene chiamato ogni volta che cambiano le proprietà del componente, incluso all'inizio del ciclo di vita del componente. Un'entità può chiamare il gestore di update un componente:

• Dopo che init () viene chiamato, all'inizio del ciclo di vita del componente.
• Quando le proprietà del componente vengono aggiornate con .setAttribute .

Il gestore di update è spesso usato per:

• Fai la maggior parte del lavoro per apportare modifiche all'entità, usando this.data .
• Modificare l'entità ogni volta che cambiano una o più proprietà del componente.

Le modifiche granulari all'entità possono essere fatte da [diffing] [diff] il dataset corrente ( this.data ) con il dataset precedente prima dell'aggiornamento ( oldData ).

A-Frame chiama .update() sia all'inizio del ciclo di vita di un componente che ogni volta che i dati di un componente cambiano (ad esempio, come risultato di setAttribute ). Il gestore di aggiornamento spesso utilizza this.data per modificare l'entità. Il gestore di aggiornamento ha accesso allo stato precedente dei dati di un componente tramite il suo primo argomento. Possiamo utilizzare i dati precedenti di un componente per indicare esattamente quali proprietà sono state modificate per eseguire aggiornamenti granulari.

Ad esempio, l' update del componente visibile imposta la visibilità dell'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;
  }
  // ...
});

.remove ()

.remove () viene chiamato ogni volta che il componente viene staccato dall'entità. Un'entità può chiamare il gestore di remove un componente:

• Quando il componente viene rimosso dall'entità tramite removeAttribute .
• Quando l'entità è staccata dalla scena (es. removeChild ).

Il gestore di remove viene spesso utilizzato per:

• Rimuovi, annulla o ripulisci tutte le modifiche del componente all'entità.
• Scollega i listener di eventi.

Ad esempio, quando il [componente luce] [luce] viene rimosso, il componente di luce rimuoverà l'oggetto luce che aveva precedentemente impostato sull'entità, rimuovendolo così dalla scena.

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

.tick (time, timeDelta)

.tick () viene chiamato su ogni spunta o fotogramma del ciclo di rendering della scena. La scena chiamerà il gestore di tick un componente:

• Su ciascun frame del ciclo di rendering.
• Nell'ordine da 60 a 120 volte al secondo.
• Se l'entità o la scena non sono in pausa (ad esempio, l'Inspector è aperto).
• Se l'entità è ancora collegata alla scena.

Il gestore tick è spesso usato per:

• Modifica continuamente l'entità su ciascun fotogramma o su un intervallo.
• Sondare per condizioni.

Il gestore tick viene fornito il tempo di attività globale della scena in millisecondi ( time ) e la differenza di tempo in millisecondi dall'ultimo frame ( timeDelta ). Questi possono essere utilizzati per l'interpolazione o per eseguire solo parti del gestore di tick su un intervallo impostato.

Ad esempio, il componente dei controlli tracciati avanza le animazioni del controller, aggiorna la posizione e la rotazione del controller e controlla la pressione dei pulsanti.

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

.pause ()

.pause () viene chiamato quando l'entità o la scena si fermano. L'entità può chiamare il gestore di pause un componente:

• Prima che il componente venga rimosso, prima che venga chiamato il gestore di remove .
• Quando l'entità è in pausa con Entity.pause () .
• Quando la scena è in pausa con Scene.pause () (ad esempio, Inspector è aperto).

Il gestore di pause è spesso usato per:

• Rimuovi i listener di eventi.
• Elimina ogni possibilità di comportamento dinamico.

Ad esempio, il componente audio interromperà il suono e rimuoverà un ascoltatore di eventi che avrebbe riprodotto un suono su un evento:

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

.giocare ()

.play () viene chiamato quando l'entità o la scena riprendono. L'entità può chiamare il gestore di play un componente:

• Quando il componente viene collegato per la prima volta, viene chiamato il gestore di update .
• Quando l'entità è stata messa in pausa, quindi è stata ripresa con Entity.play () .
• Quando la scena è stata messa in pausa, quindi è stata ripresa con Scene.play () .

Il gestore di play è spesso utilizzato per:

• Aggiungi ascoltatori di eventi.

Ad esempio, la componente audio riprodurrà il suono e aggiornerà l'ascoltatore di eventi che riprodurrebbe un suono su un evento:

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

.updateSchema (dati)

.updateSchema () , se definito, viene richiamato su ogni aggiornamento per verificare se lo schema deve essere modificato dinamicamente.

Il gestore di updateSchema è spesso usato per:

• Aggiorna o estendi dinamicamente lo schema, in genere in base al valore di una proprietà.

Ad esempio, il componente geometry verifica se la proprietà primitive modificata per determinare se aggiornare lo schema per un diverso tipo di geometria:

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

METODI PROTOTIPI COMPONENTI

.flushToDOM ()

Per risparmiare sul tempo della CPU sulla stringa, A-Frame aggiornerà solo in modalità di debug la rappresentazione serializzata del componente nel DOM corrente. La chiamata a flushToDOM () serializzerà manualmente i dati del componente e aggiornerà il DOM:

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