aframe
składniki

We wzorcu encja-komponent-system komponent to wielokrotnego użytku i modułowy fragment danych, który podłączamy do encji w celu dodania wyglądu, zachowania i / lub funkcjonalności.

W ramce A komponenty modyfikują byty, które są obiektami 3D na scenie. Łączymy i komponujemy komponenty, aby budować złożone obiekty. Pozwalają nam enkapsulować trzy.js i kod JavaScript w moduły, których możemy używać deklaratywnie z HTML. Komponenty są z grubsza analogiczne do CSS.

Definicja Metody obsługi cyklu życia

Ponieważ schemat jest anatomią, metodami cyklu życia są fizjologia; schemat określa kształt danych, metody modułu obsługi cyklu życia wykorzystują dane do modyfikacji obiektu. Procedury obsługi zwykle będą oddziaływać z interfejsem API jednostki .

Przegląd metod

Właściwości prototypu elementu

W ramach metod, mamy dostęp do prototypu komponentu poprzez this :

METODY

.w tym ()

.init () jest wywoływana raz na początku cyklu życia komponentu. Jednostka może wywołać init obsługi modułu:

• Gdy składnik jest ustawiony statycznie na encję w pliku HTML, a strona jest ładowana.
• Gdy komponent jest ustawiony na dołączonym setAttribute za pośrednictwem setAttribute .
• Gdy komponent jest ustawiony na nieprzyłączonej encji, a następnie jest on dołączany do sceny za pośrednictwem appendChild .

Moduł obsługi init jest często używany do:

• Ustaw stan początkowy i zmienne
• Metody wiązania
• Dołącz detektory zdarzeń

Na przykład init komponentu kursora ustawia zmienne stanu, metody wiązania i dodaje detektory zdarzeń:

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) jest wywoływana za każdym razem, gdy zmieniają się właściwości komponentu, w tym na początku cyklu życia komponentu. Jednostka może wywołać update obsługi update komponentu:

• Po wywołaniu init () na początku cyklu życia komponentu.
• Gdy właściwości komponentu zostaną zaktualizowane za pomocą .setAttribute .

Moduł obsługi update jest często używany do:

• Wykonaj większość pracy przy modyfikowaniu encji, używając this.data .
• Zmodyfikuj element za każdym razem, gdy zmieni się jedna lub więcej właściwości komponentu.

Szczegółowych modyfikacji encji można dokonać poprzez [różnicowanie] [różnicowanie] bieżącego zestawu danych ( this.data ) z poprzednim this.data danych przed aktualizacją ( oldData ).

A-Frame wywołuje .update() zarówno na początku cyklu życia komponentu, jak i za każdym razem, gdy zmieniają się dane komponentu (np. W wyniku setAttribute ). Moduł obsługi aktualizacji często używa this.data do modyfikowania encji. Moduł obsługi aktualizacji ma dostęp do poprzedniego stanu danych komponentu za pośrednictwem pierwszego argumentu. Możemy użyć poprzednich danych komponentu, aby dokładnie powiedzieć, które właściwości zostały zmienione w celu przeprowadzenia szczegółowych aktualizacji.

Na przykład update widocznego komponentu ustawia widoczność encji.

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 () jest wywoływana za każdym razem, gdy komponent jest odłączany od encji. Jednostka może wywołać remove obsługi remove komponentu:

• Gdy składnik zostanie usunięty z obiektu za pomocą removeAttribute .
• Gdy jednostka zostanie odłączona od sceny (np. removeChild ).

Moduł obsługi remove jest często używany do:

• Usuń, cofnij lub wyczyść wszystkie modyfikacje komponentu w encji.
• Odłącz detektory zdarzeń.

Na przykład po usunięciu [komponentu światła] [light] komponent światła usunie obiekt lekki, który wcześniej ustawił na obiekcie, usuwając go ze sceny.

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

.tick (czas, czasDelta)

.tick () jest wywoływany w każdym tiku lub ramce pętli renderowania sceny. Scena wywoła tick obsługi tick komponentu:

• Na każdej ramce pętli renderowania.
• W przedziale od 60 do 120 razy na sekundę.
• Jeśli obiekt lub scena nie jest wstrzymana (np. Inspektor jest otwarty).
• Jeśli jednostka nadal jest dołączona do sceny.

Obsługa tick jest często używana do:

• W sposób ciągły modyfikuj element w każdej ramce lub w odstępach czasu.
• Sonda dla warunków.

Moduł obsługi tick zapewnia globalny czas działania sceny w milisekundach ( time ) i różnicę czasu w milisekundach od ostatniej klatki ( timeDelta ). Można ich użyć do interpolacji lub do uruchamiania tylko części modułu obsługi tick w ustalonym odstępie czasu.

Na przykład śledzony komponent kontrolny będzie rozwijał animacje kontrolera, aktualizował pozycję i obrót kontrolera oraz sprawdzał naciśnięcia przycisków.

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

.pause ()

.pause () jest wywoływana, gdy jednostka lub scena .pause () wstrzymane. Jednostka może wywołać pause obsługi pause komponentu:

• Przed usunięciem komponentu, przed wywołaniem modułu obsługi remove .
• Gdy encja jest wstrzymana za pomocą Entity.pause () .
• Gdy scena jest wstrzymana za pomocą Scene.pause () (np. Inspektor jest otwarty).

Moduł obsługi pause jest często używany do:

• Usuń detektory zdarzeń.
• Usuń wszelkie szanse na zachowanie dynamiczne.

Na przykład komponent dźwiękowy wstrzyma dźwięk i usunie detektor zdarzeń, który odtworzyłby dźwięk w przypadku zdarzenia:

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

.grać ()

.play () jest wywoływana, gdy jednostka lub scena zostaną wznowione. Podmiot może wywołać komponentu play obsługi:

• Po pierwszym podłączeniu komponentu po wywołaniu modułu obsługi update .
• Gdy jednostka została wstrzymana, ale następnie wznowiona za pomocą Entity.play () .
• Gdy scena została wstrzymana, ale następnie wznowiona za pomocą Scene.play () .

Program obsługi play jest często używany do:

• Dodaj detektory zdarzeń.

Na przykład komponent dźwiękowy odtworzy dźwięk i zaktualizuje detektor zdarzeń, który odtworzy dźwięk w przypadku zdarzenia:

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

.updateSchema (dane)

.updateSchema () , jeśli jest zdefiniowana, jest wywoływana przy każdej aktualizacji w celu sprawdzenia, czy schemat wymaga dynamicznej modyfikacji.

updateSchema obsługi updateSchema jest często używany do:

• Dynamicznie aktualizuj lub rozszerzaj schemat, zwykle w zależności od wartości właściwości.

Na przykład komponent geometrii sprawdza, czy właściwość primitive uległa zmianie, aby ustalić, czy zaktualizować schemat dla innego typu geometrii:

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

KOMPONENTOWE METODY PROTOTYPOWE

.flushToDOM ()

Aby zaoszczędzić czas procesora podczas tworzenia łańcucha, A-Frame aktualizuje tylko w trybie debugowania serializowaną reprezentację komponentu w rzeczywistym DOM. Wywołanie flushToDOM () spowoduje ręczną serializację danych komponentu i aktualizację DOM:

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