aframe
Komponenter

I enhetens komponent-systemmönster är en komponent en återanvändbar och modulär mängd data som vi ansluter till en enhet för att lägga till utseende, beteende och / eller funktionalitet.

I A-Frame ändrar komponenter enheter som är 3D-objekt i scenen. Vi blandar och komponerar komponenter för att bygga komplexa objekt. De låter oss inkapsla three.js och JavaScript-kod i moduler som vi kan använda deklarativt från HTML. Komponenter är i stort sett analoga med CSS.

Definition Lifecycle Handler Methods

Med schemat som anatomi är livscykelmetoderna fysiologi; schemat definierar formen på data, livscykelhanteraren använder metoderna för att modifiera enheten. Hanterarna kommer vanligtvis att interagera med Entity API .

Översikt över metoder

Komponentprototypegenskaper

Inom metoderna har vi tillgång till komponentprototypen via this :

METODER

.i det ()

.init () kallas en gång i början av komponentens livscykel. En enhet kan ringa komponentens init hanterare:

• När komponenten är statiskt inställd på enheten i HTML-filen och sidan laddas.
• När komponenten är inställd på en bifogad enhet via setAttribute .
• När komponenten är inställd på en icke kopplad enhet, och enheten kopplas sedan till scenen via appendChild .

init hanteraren används ofta för att:

• Ställ in initialtillstånd och variabler
• Bindningsmetoder
• Bifoga evenemangets lyssnare

Till exempel skulle en markörkomponentens init ställa in tillståndsvariabler, binda metoder och lägga till händelse lyssnare:

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) kallas när komponentens egenskaper ändras, inklusive i början av komponentens livscykel. En enhet kan ringa en komponents update :

• Efter init () kallas, i början av komponentens livscykel.
• När komponentens egenskaper uppdateras med .setAttribute .

update används ofta för att:

• Gör det mesta av arbetet med att göra ändringar av enheten med hjälp av this.data .
• Ändra enheten när en eller flera komponentegenskaper ändras.

Granulära ändringar av enheten kan göras genom att [diffing] [diff] den nuvarande datasatsen ( this.data ) med föregående datasats före uppdateringen ( oldData ).

A-Frame anropar .update() både i början av komponentens livscykel och varje gång en komponents data ändras (t.ex. till följd av setAttribute ). Uppdateringshanteraren använder ofta this.data att ändra enheten. Uppdateringshanteraren har åtkomst till det tidigare tillståndet för en komponents data via sitt första argument. Vi kan använda tidigare data för en komponent för att berätta exakt vilka egenskaper som har ändrats för att göra granulära uppdateringar.

Till exempel anger den synliga komponentens update enhetens synlighet.

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

.ta bort ()

.remove () kallas närhelst komponenten kopplas bort från enheten. En enhet kan ringa en komponents remove :

• När komponenten tas bort från enheten via removeAttribute .
• När enheten är fristående från scenen (t.ex. ta removeChild ).

remove hanteraren används ofta för att:

• Ta bort, ångra eller rensa upp alla komponentens ändringar av enheten.
• Lossa evenemangets lyssnare.

Till exempel, när [ljuskomponenten] [ljuset] tas bort, kommer ljuskomponenten att ta bort det ljusobjekt som det tidigare hade ställts in på enheten, och därmed ta bort det från scenen.

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

.tick (tid, tidDelta)

.tick () kallas på varje fästing eller ram i scenens renderingsslinga. Scenen kommer att anropa en komponents tick hanterare:

• På varje ram på renderingsslingan.
• I storleksordningen 60 till 120 gånger per sekund.
• Om enheten eller scenen inte är pausad (t.ex. är inspektören öppen).
• Om enheten fortfarande är kopplad till scenen.

Den tick handler används ofta för att:

• Modifiera enheten kontinuerligt i varje ram eller i ett intervall.
• Undersökning för villkor.

tick hanteraren tillhandahåller den globala drifttiden för scenen i millisekunder ( time ) och tidsskillnaden i millisekunder sedan den sista ramen ( timeDelta ). Dessa kan användas för interpolering eller för att bara köra delar av tick på ett inställt intervall.

Till exempel kommer den spårade kontrollkomponenten att fortsätta kontrollerns animationer, uppdatera regulatorns position och rotation och kontrollera om knapptryckningar finns.

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

.paus ()

.pause () kallas när enheten eller scenen pausar. Enheten kan kalla en komponentens pause handler:

• Innan komponenten tas bort, innan remove anropas.
• När enheten är pausad med Entity.pause () .
• När scenen är pausad med Scene.pause () (t.ex. inspektören öppnas).

Den pause handler används ofta för att:

• Ta bort händelserna.
• Ta bort alla chanser för dynamiskt beteende.

Till exempel kommer ljudkomponenten att pausa ljudet och ta bort en händelse lyssnare som skulle ha spelat ett ljud på en händelse:

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

.spela ()

.play () kallas när enheten eller scenen återupptas. Enheten kan kalla en komponentens play handler:

• När komponenten först är ansluten efter att update har ringt.
• När enheten pausades men återupptogs sedan med Entity.play () .
• När scenen pausades men återupptogs sedan med Scene.play () .

Den play ofta använder för att:

• Lägg till evenemangets lyssnare.

Till exempel kommer ljudkomponenten att spela upp ljudet och uppdatera händelsen lyssnaren som skulle spela ett ljud på en händelse:

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

.updateSchema (data)

.updateSchema () , om det definieras, kallas varje uppdatering för att kontrollera om schemat måste ändras dynamiskt.

updateSchema hanteraren används ofta för att:

• Uppdatera eller utöka schemat dynamiskt, vanligtvis beroende på värdet på en egenskap.

Till exempel kontrollerar geometrikomponenten om den primitive egenskapen har ändrats för att avgöra om schemat ska uppdateras för en annan typ av geometri:

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

KOMPONENT PROTOTYPE METODER

.flushToDOM ()

För att spara på CPU-tid vid strängning kommer A-Frame endast att uppdatera i felsökningsläge komponentens serialiserade representation i själva DOM. Att ringa flushToDOM () kommer att manuellt serialisera komponentens data och uppdatera DOM:

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