aframe
Entitäten

A-Frame repräsentiert eine Entität über das Element <a-entity> . Wie im Entitäts-Komponentensystem-Muster definiert, sind Entitäten Platzhalterobjekte, in die Komponenten eingefügt werden, um ihnen Aussehen, Verhalten und Funktionalität zu bieten.

Methoden

addState (stateName)

addState überträgt einen Zustand auf die Entität. Dadurch wird das stateadded- Ereignis ausgegeben , und wir können den Status mit .is auf Existenz überprüfen:

entity.addEventListener('stateadded', function (evt) {
  if (evt.detail.state === 'selected') {
    console.log('Entity now selected!');
  }
});
entity.addState('selected');
entity.is('selected');  // >> true

emittieren (Name, Detail, Blasen)

emit gibt ein benutzerdefiniertes DOM-Ereignis für die Entität aus. Zum Beispiel können wir ein Ereignis ausgeben, um eine Animation auszulösen:

<a-entity>
  <a-animation attribute="rotation" begin="rotate" to="0 360 0"></a-animation>
</a-entity>

entity.emit('rotate');

Wir können auch Ereignisdetails oder Daten als zweites Argument übergeben:

entity.emit('collide', { target: collidingEntity });

Das Ereignis wird standardmäßig angezeigt. Wir können sagen, dass es nicht blubbern soll, indem Sie false für bubble übergeben:

entity.emit('sink', null, false);

flushToDOM (rekursiv)

flushToDOM serialisiert die Daten einer Entität manuell und aktualisiert das DOM.

getAttribute (Komponentenname)

getAttribute ruft geparste Komponentendaten (einschließlich Mixins und Standardwerte) ab.

// <a-entity geometry="primitive: box; width: 3">
entity.getAttribute('geometry');
// >> {primitive: "box", depth: 2, height: 2, translate: "0 0 0", width: 3, ...}
entity.getAttribute('geometry').primitive;
// >> "box"
entity.getAttribute('geometry').height;
// >> 2
entity.getAttribute('position');
// >> {x: 0, y: 0, z: 0}

Wenn Komponentenname nicht der Name einer registrierten Komponente ist, verhält sich getAttribute wie gewöhnlich:

// <a-entity data-position="0 1 1">
entity.getAttribute('data-position');
// >> "0 1 1"

getDOMAttribute (Komponentenname)

getDOMAttribute ruft nur geparste Komponentendaten ab, die explizit im DOM oder über setAttribute definiert sind . Wenn Komponentenname der Name einer registrierten Komponente ist, gibt getDOMAttribute nur die im HTML definierten Komponentendaten als geparstes Objekt zurück. getDOMAttribute für Komponenten ist die Teilform von getAttribute, da die zurückgegebenen Komponentendaten keine angewendeten Mixins oder Standardwerte enthalten:

Vergleichen Sie die Ausgabe des obigen Beispiels für getAttribute :

// <a-entity geometry="primitive: box; width: 3">
entity.getDOMAttribute('geometry');
// >> { primitive: "box", width: 3 }
entity.getDOMAttribute('geometry').primitive;
// >> "box"
entity.getDOMAttribute('geometry').height;
// >> undefined
entity.getDOMAttribute('position');
// >> undefined

getObject3D (Typ)

getObject3D sucht ein untergeordnetes THREE.Object3D, auf das in object3DMap vom Typ verwiesen wird .

AFRAME.registerComponent('example-mesh', {
  init: function () {
     var el = this.el;
     el.getOrCreateObject3D('mesh', THREE.Mesh);
     el.getObject3D('mesh');  // Returns THREE.Mesh that was just created.
  }
});

getOrCreateObject3D (Typ, Konstruktor)

Wenn für die Entität kein THREE.Object3D unter type registriert ist, registriert getOrCreateObject3D ein instantiiertes THREE.Object3D mit dem übergebenen Konstruktor . Wenn für die Entität ein THREE.Object3D- Typ unter Typ registriert ist, fungiert getOrCreateObject3D als getObject3D :

AFRAME.registerComponent('example-geometry', {
  update: function () {
    var mesh = this.el.getOrCreateObject3D('mesh', THREE.Mesh);
    mesh.geometry = new THREE.Geometry();
  }
});

Pause ()

pause () stoppt dynamisches Verhalten, wie es von Animationen und Komponenten definiert wird. Wenn wir eine Entität unterbrechen, stoppt sie ihre Animationen und ruft Component.pause () für jede ihrer Komponenten auf. Die Komponenten entscheiden sich für die Implementierung des Pausenverhaltens, wodurch häufig Ereignis-Listener entfernt werden. Eine Entität ruft pause () für ihre untergeordneten Entitäten auf, wenn eine Entität angehalten wird.

// <a-entity id="spinning-jumping-ball">
entity.pause();

Beispielsweise entfernt die Look-Control-Komponente bei Pause Ereignis-Handler, die auf Eingaben warten.

abspielen ()

play () startet jedes dynamische Verhalten, das durch Animationen und Komponenten definiert wird. Dies wird automatisch aufgerufen, wenn das DOM eine Entität anfügt. Wenn eine Entität play () startet, ruft die Entity play () für ihre untergeordneten Entitäten auf.

entity.pause();
entity.play();

Zum Beispiel beginnt die Soundkomponente beim Abspielen des Sounds.

setAttribute (Komponentenname, Wert, [Eigenschaftswert | Clobber])

Wenn Komponentenname nicht der Name einer registrierten Komponente ist oder die Komponente eine Komponente mit einer einzigen Eigenschaft ist, verhält sich setAttribute wie folgt :

entity.setAttribute('visible', false);

Wenn Komponentenname der Name einer registrierten Komponente ist, kann sie die spezielle Analyse für den Wert verarbeiten. Die Positionskomponente ist beispielsweise eine Komponente mit einer einzigen Eigenschaft, ihr Parser für Eigenschaftstyp ermöglicht jedoch die Übernahme eines Objekts:

entity.setAttribute('position', { x: 1, y: 2, z: 3 });

setObject3D (Typ, Objekt)

setObject3D registriert das übergebene Objekt , ein THREE.Object3D , als type unter der object3DMap der Entität. A-Frame fügt obj als untergeordnetes Objekt des Entity- Objekts object3D hinzu .

AFRAME.registerComponent('example-orthogonal-camera', {
  update: function () {
    this.el.setObject3D('camera', new THREE.OrthogonalCamera());
  }
});

removeAttribute (Komponentenname, Eigenschaftsname)

Wenn Komponentenname der Name einer registrierten Komponente ist und das Attribut aus dem DOM entfernt wird, trennt removeAttribute auch die Komponente von der Entität und ruft die Entfernungszyklusmethode der Komponente auf.

entity.removeAttribute('goemetry');  // Detach the geometry component.
entity.removeAttribute('sound');  // Detach the sound component.

Wenn propertyName angegeben ist, setzt removeAttribute den Eigenschaftswert der von propertyName angegebenen Eigenschaft auf den Standardwert der Eigenschaft zurück:

entity.setAttribute('material', 'color', 'blue');  // The color is blue.
entity.removeAttribute('material', 'color');  // Reset the color to the default value, white.

removeObject3D (Typ)

removeObject3D entfernt das durch type angegebene Objekt aus der THREE.Group der Entität und somit aus der Szene. Dadurch wird object3DMap der Entität aktualisiert und der Wert des Typenschlüssels auf null gesetzt . Dies wird im Allgemeinen von einer Komponente aus aufgerufen, häufig im Remove-Handler:

AFRAME.registerComponent('example-light', {
  update: function () {
    this.el.setObject3D('light', new THREE.Light());
    // Light is now part of the scene.
    // object3DMap.light is now a THREE.Light() object.
  },
  remove: function () {
    this.el.removeObject3D('light');
    // Light is now removed from the scene.
    // object3DMap.light is now null.
  }
});

removeState (stateName)

removeState zeigt einen Zustand aus der Entität an. Dadurch wird das stateremoved -Ereignis ausgegeben , und wir können den Status des Entfernens mit .is überprüfen:

entity.addEventListener('stateremoved', function (evt) {
  if (evt.detail.state === 'selected') {
    console.log('Entity no longer selected.');
  }
});
entity.addState('selected');
entity.is('selected');  // >> true
entity.removeState('selected');
entity.is('selected');  // >> false

VERANSTALTUNGEN

VERANSTALTUNGSDETAILS

Nachfolgend finden Sie die Details zu den einzelnen Ereignissen: