aframe
Komponenten

Im Entity-Component-System-Muster ist eine Komponente ein wiederverwendbarer und modularer Datenblock, den wir in eine Entity einfügen, um Aussehen, Verhalten und / oder Funktionalität hinzuzufügen.

In A-Frame ändern Komponenten Objekte, die 3D-Objekte in der Szene sind. Wir mischen und komponieren Komponenten, um komplexe Objekte zu erstellen. Damit lassen wir three.js und JavaScript-Code in Module einkapseln, die wir deklarativ aus HTML verwenden können. Komponenten sind in etwa analog zu CSS.

Methoden zum Definieren von Lebenszyklus-Handlern

Da das Schema die Anatomie ist, sind die Lebenszyklusmethoden die Physiologie. Das Schema definiert die Form der Daten, verwenden die Lifecycle - Handler Methoden , um die Daten , die die Einheit zu modifizieren. Die Handler interagieren normalerweise mit der Entity-API .

Methodenübersicht

Eigenschaften des Komponentenprototyps

Innerhalb der Methoden haben wir Zugriff auf die Komponente Prototyp über this :

Methoden

.drin ()

.init () wird einmal zu Beginn des Lebenszyklus der Komponente aufgerufen. Eine Entität kann den init Handler der Komponente aufrufen:

• Wenn die Komponente für die Entität in der HTML-Datei statisch festgelegt ist und die Seite geladen wird.
• Wenn die Komponente über setAttribute auf eine verbundene Entität setAttribute .
• Wenn die Komponente auf ein nicht verbundenes appendChild ist und das appendChild dann über appendChild an die Szene appendChild .

Der init Handler wird häufig verwendet, um:

• Richten Sie den Anfangsstatus und die Variablen ein
• Bindungsmethoden
• Event-Listener anhängen

Beispielsweise würde das init einer Cursor-Komponente Zustandsvariablen setzen, Methoden binden und Ereignis-Listener hinzufügen:

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 (alteDaten)

.update (oldData) wird aufgerufen, wenn sich die Eigenschaften der Komponente ändern, auch zu Beginn des Lebenszyklus der Komponente. Eine Entität kann den update Handler einer Komponente aufrufen:

• Nach dem Aufruf von init () zu Beginn des Komponentenlebenszyklus.
• Wenn die Eigenschaften der Komponente mit .setAttribute aktualisiert .setAttribute .

Der update Handler wird häufig verwendet, um:

• this.data Sie die meiste Arbeit aus, indem this.data mit this.data Änderungen an der Entität this.data .
• Ändern Sie die Entität, wenn sich eine oder mehrere Komponenteneigenschaften ändern.

Granulare Änderungen an der Entität können durch [diffing] [diff] des aktuellen Datensatzes ( this.data ) mit dem vorherigen Datensatz vor dem Update ( oldData ) durchgeführt werden.

A-Frame ruft .update() sowohl zu Beginn des Lebenszyklus einer Komponente als auch bei jeder Änderung der Daten einer Komponente auf (z. B. infolge von setAttribute ). Der Update-Handler verwendet häufig diese this.data , um die Entität zu ändern. Der Update-Handler hat über sein erstes Argument Zugriff auf den vorherigen Status der Komponentendaten. Anhand der vorherigen Daten einer Komponente können wir genau feststellen, welche Eigenschaften geändert wurden, um granulare Aktualisierungen durchzuführen.

Die update der sichtbaren Komponente legt beispielsweise die Sichtbarkeit der Entität fest.

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

.Löschen ()

.remove () wird aufgerufen, wenn die Komponente von der Entität getrennt wird. Eine Entität kann den remove Handler einer Komponente aufrufen:

• Wenn die Komponente über removeAttribute aus der Entität removeAttribute .
• Wenn das removeChild von der Szene getrennt wird (z. B. removeChild ).

Der remove Handler wird häufig verwendet, um:

• Entfernen, rückgängig machen oder bereinigen Sie alle Änderungen der Komponente an der Entität.
• Event-Hörer trennen.

Wenn beispielsweise [Lichtkomponente] [Licht] entfernt wird, entfernt die Lichtkomponente das Lichtobjekt, das zuvor für das Objekt festgelegt wurde, und entfernt es somit aus der Szene.

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

.tick (Zeit, ZeitDelta)

.tick () wird bei jedem Tick oder Frame der Render-Schleife der Szene aufgerufen. Die Szene ruft den tick Handler einer Komponente auf:

• In jedem Frame der Render-Schleife.
• In der Größenordnung von 60 bis 120 Mal pro Sekunde.
• Wenn das Objekt oder die Szene nicht angehalten ist (z. B. ist der Inspector geöffnet).
• Wenn das Objekt noch an die Szene angehängt ist.

Der tick Handler wird häufig verwendet, um:

• Ändern Sie die Entität kontinuierlich in jedem Frame oder in einem Intervall.
• Umfrage nach Bedingungen.

Dem tick Handler werden die globale Betriebszeit der Szene in Millisekunden ( time ) und der Zeitunterschied in Millisekunden seit dem letzten Frame ( timeDelta ) timeDelta . Diese können zur Interpolation oder zum Ausführen von Teilen des tick Handlers in einem festgelegten Intervall verwendet werden.

Die nachverfolgte Steuerungskomponente führt beispielsweise die Animationen des Controllers fort, aktualisiert die Position und Drehung des Controllers und prüft, ob Tasten gedrückt werden.

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

.Pause ()

.pause () wird aufgerufen, wenn das .pause () oder die Szene pausiert. Die Entität kann den pause einer Komponente aufrufen:

• Bevor die Komponente entfernt wird, bevor der remove Handler aufgerufen wird.
• Wenn die Entität mit Entity.pause () angehalten wird.
• Wenn die Szene mit Scene.pause () angehalten wird (z. B. der Inspector wird geöffnet).

Der pause Handler wird häufig verwendet, um:

• Event-Listener entfernen
• Entfernen Sie alle Chancen für dynamisches Verhalten.

Zum Beispiel wird die Klangkomponente den Ton anhalten und einen Ereignis - Listener entfernen , die einen Ton auf einem Event gespielt hätten:

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

.abspielen ()

.play () wird aufgerufen, wenn das .play () oder die Szene .play () wird. Die Entität kann den play Handler einer Komponente aufrufen:

• Wenn die Komponente zum ersten Mal angeschlossen wird, nachdem der update Handler aufgerufen wurde.
• Wenn die Entität angehalten wurde, dann aber mit Entity.play () .
• Wenn die Szene angehalten wurde, dann aber mit Scene.play () .

Der play Handler wird häufig verwendet, um:

• Fügen Sie Ereignis-Listener hinzu.

Zum Beispiel gibt die Soundkomponente den Sound wieder und aktualisiert den Event-Listener, der bei einem Event einen Sound abspielen würde:

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

.updateSchema (Daten)

.updateSchema () , falls definiert, bei jeder Aktualisierung aufgerufen, um zu prüfen, ob das Schema dynamisch geändert werden muss.

Der updateSchema Handler wird häufig verwendet, um:

• Das Schema dynamisch aktualisieren oder erweitern, normalerweise abhängig vom Wert einer Eigenschaft.

Die Geometriekomponente prüft beispielsweise, ob sich die primitive geändert hat, um festzustellen, ob das Schema für einen anderen Geometrietyp aktualisiert werden soll:

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

KOMPONENTEN-PROTOTYP-VERFAHREN

.flushToDOM ()

Um CPU-Zeit bei der Stringifizierung zu sparen, aktualisiert A-Frame nur im Debug-Modus die serialisierte Darstellung der Komponente im tatsächlichen DOM. Durch Aufrufen von flushToDOM () werden die Daten der Komponente manuell serialisiert und das DOM aktualisiert:

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