aframe
Components

In het entiteit-component-systeempatroon is een component een herbruikbaar en modulair stuk gegevens dat we in een entiteit stoppen om uiterlijk, gedrag en / of functionaliteit toe te voegen.

In A-Frame wijzigen componenten entiteiten die 3D-objecten in de scène zijn. We mixen en componeren componenten om complexe objecten te bouwen. Ze laten ons three.js en JavaScript-code inkapselen in modules die we declaratief kunnen gebruiken vanuit HTML. Componenten zijn ongeveer analoog aan CSS.

Definitie Lifecycle Handler-methoden

Met het schema als de anatomie, zijn de levenscyclusmethoden de fysiologie; het schema definieert de vorm van de gegevens, de lifecycle handler-methoden gebruiken de gegevens om de entiteit te wijzigen. De handlers zullen meestal communiceren met de Entity API .

Overzicht van methoden

Onderdeel Prototype Eigenschappen

Binnen de methoden hebben we via this toegang tot het prototype van de component:

METHODEN

.in het ()

.init () wordt eenmaal aan het begin van de levenscyclus van de component aangeroepen. Een entiteit kan de init handler van de component aanroepen:

• Wanneer de component statisch is ingesteld op de entiteit in het HTML-bestand en de pagina is geladen.
• Wanneer de component is ingesteld op een gekoppelde entiteit via setAttribute .
• Wanneer de component is ingesteld op een niet-gekoppelde entiteit en de entiteit vervolgens via appendChild aan de scène is appendChild .

De init handler wordt vaak gebruikt om:

• Stel de initiële status en variabelen in
• Bindmethoden
• Voeg gebeurtenisluisteraars toe

De init een cursorcomponent zou bijvoorbeeld init instellen, bindmethoden en gebeurtenislisteners toevoegen:

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

.update (oldData) wordt aangeroepen wanneer de eigenschappen van de component veranderen, ook aan het begin van de levenscyclus van de component. Een entiteit kan de update handler van een component aanroepen:

• Nadat init () wordt aangeroepen, aan het begin van de levenscyclus van een component.
• Wanneer de eigenschappen van de component worden bijgewerkt met .setAttribute .

De update handler wordt vaak gebruikt om:

• Voer het meeste werk uit bij het aanbrengen van wijzigingen in de entiteit, met behulp van this.data .
• Wijzig de entiteit wanneer een of meer componenteigenschappen veranderen.

Gedetailleerde aanpassingen aan de entiteit kunnen worden gedaan door [diffing] [diff] de huidige gegevensset ( this.data ) met de vorige gegevensset vóór de update ( oldData ).

A-Frame roept .update() zowel aan het begin van de levenscyclus van een component als telkens wanneer de gegevens van een component veranderen (bijvoorbeeld als gevolg van setAttribute ). De update-handler gebruikt vaak this.data om de entiteit te wijzigen. De update-handler heeft via het eerste argument toegang tot de vorige status van de gegevens van een component. We kunnen de vorige gegevens van een component gebruiken om precies te weten welke eigenschappen zijn gewijzigd om gedetailleerde updates uit te voeren.

De update de zichtbare component stelt bijvoorbeeld de zichtbaarheid van de entiteit in.

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 () wordt aangeroepen wanneer de component wordt losgekoppeld van de entiteit. Een entiteit kan de remove handler van een component aanroepen:

• Wanneer het onderdeel uit de entiteit wordt verwijderd via removeAttribute .
• Wanneer de entiteit wordt losgekoppeld van de scène (bijvoorbeeld removeChild ).

De remove wordt vaak gebruikt om:

• Verwijder alle wijzigingen van de component aan de entiteit, maak deze ongedaan of ruim ze op.
• Maak gebeurtenisluisteraars los.

Wanneer bijvoorbeeld de [lichtcomponent] [licht] wordt verwijderd, verwijdert de lichtcomponent het lichtobject dat het eerder op de entiteit had ingesteld, waardoor het uit de scène werd verwijderd.

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

.tick (time, timeDelta)

.tick () wordt aangeroepen bij elke tik of elk frame van de .tick () van de scène. De scène roept de tick een component aan:

• Op elk frame van de render-lus.
• In de orde van 60 tot 120 keer per seconde.
• Als de entiteit of scène niet is gepauzeerd (de inspecteur is bijvoorbeeld geopend).
• Als de entiteit nog steeds aan de scène is gekoppeld.

De tick handler wordt vaak gebruikt om:

• Wijzig de entiteit continu op elk frame of op een interval.
• Poll voor voorwaarden.

De tick geleider verschaft de globale inzetbaarheid van de scène in milliseconden ( time ) en het tijdsverschil in milliseconden sinds het laatste frame ( timeDelta ). Deze kunnen worden gebruikt voor interpolatie of pas te lopen delen van de tick handler op vaste intervallen.

De component met bijgehouden besturingselementen zal bijvoorbeeld de animaties van de controller voortzetten, de positie en rotatie van de controller bijwerken en controleren of er op een knop wordt gedrukt.

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

.pause ()

.pause () wordt aangeroepen wanneer de entiteit of scène pauzeert. De entiteit kan een component noemen pause handler:

• Voordat het onderdeel wordt verwijderd, voordat de remove handler wordt aangeroepen.
• Wanneer de entiteit is gepauzeerd met Entity.pause () .
• Wanneer de scène wordt gepauzeerd met Scene.pause () (de Inspector wordt bijvoorbeeld geopend).

De pause handler wordt vaak gebruikt om:

• Verwijder gebeurtenisluisteraars.
• Verwijder alle kansen op dynamisch gedrag.

De geluidscomponent onderbreekt bijvoorbeeld het geluid en verwijdert een gebeurtenislistener die een geluid op een gebeurtenis zou hebben afgespeeld:

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

.Speel ()

.play () wordt opgeroepen wanneer de entiteit of scène wordt hervat. De entiteit kan de play handler van een component aanroepen:

• Wanneer de component voor het eerst wordt gekoppeld, wordt de update handler aangeroepen.
• Wanneer de entiteit is onderbroken maar vervolgens is hervat met Entity.play () .
• Wanneer de scène werd gepauzeerd maar vervolgens werd hervat met Scene.play () .

De play -handler wordt vaak gebruikt om:

• Voeg gebeurtenisluisteraars toe.

De geluidscomponent speelt bijvoorbeeld het geluid af en werkt de gebeurtenislistener bij die een geluid op een gebeurtenis zou afspelen:

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

.updateSchema (gegevens)

.updateSchema () , indien gedefinieerd, wordt bij elke update aangeroepen om te controleren of het schema dynamisch moet worden gewijzigd.

De updateSchema handler wordt vaak gebruikt om:

• Werk het schema dynamisch bij of verleng het, meestal afhankelijk van de waarde van een eigenschap.

De geometriecomponent controleert bijvoorbeeld of de primitive eigenschap is gewijzigd om te bepalen of het schema moet worden bijgewerkt voor een ander type geometrie:

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

COMPONENTEN PROTOTYPE METHODEN

.flushToDOM ()

Om CPU-tijd te besparen bij stringificatie, werkt A-Frame alleen in de foutopsporingsmodus de geserialiseerde weergave van de component in de werkelijke DOM bij. Door flushToDOM () aan te roepen, worden de gegevens van de component handmatig geserialiseerd en wordt de DOM bijgewerkt:

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