aframe
entiteiten

A-Frame vertegenwoordigt een entiteit via het element <a-entity> . Zoals gedefinieerd in het entiteit-component-systeempatroon, zijn entiteiten plaatsaanduidingsobjecten waarop we componenten aansluiten om ze uiterlijk, gedrag en functionaliteit te bieden.

METHODEN

addState (stateName)

addState zal een status naar de entiteit duwen. Dit zal de stateadded- gebeurtenis uitzenden, en we kunnen de statusbus voor bestaan controleren met .is :

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

uitzenden (naam, detail, bubbels)

emit zendt een aangepaste DOM-gebeurtenis uit op de entiteit. We kunnen bijvoorbeeld een gebeurtenis uitzenden om een animatie te activeren:

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

entity.emit('rotate');

We kunnen ook gebeurtenisdetails of gegevens doorgeven als het tweede argument:

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

Het evenement zal standaard bellen. we kunnen vertellen dat het niet moet bubbelen door false voor bubble door te geven:

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

flushToDOM (recursief)

flushToDOM zal de gegevens van de componenten van een entiteit handmatig serialiseren en de DOM bijwerken.

getAttribute (componentName)

getAttribute haalt geparseerde componentgegevens op (inclusief mixins en standaardwaarden).

// <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}

Als componentName niet de naam van een geregistreerd component is, zal getAttribute zich gedragen zoals normaal:

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

getDOMAttribute (componentName)

getDOMAttribute haalt alleen ontlede componentgegevens op die expliciet in de DOM of via setAttribute zijn gedefinieerd . Als componentName de naam is van een geregistreerd component, retourneert getDOMAttribute alleen de componentgegevens die in de HTML zijn gedefinieerd als een ontleed object. getDOMAttribute voor componenten is de gedeeltelijke vorm van getAttribute omdat de geretourneerde componentgegevens geen toegepaste mixins of standaardwaarden bevatten:

Vergelijk de uitvoer van het bovenstaande voorbeeld van 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 (type)

getObject3D zoekt een kind op DRIE.Object3D waarnaar per type wordt verwezen op object3DMap .

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 (type, Constructor)

Indien de entiteit niet beschikt over een THREE.Object3D onder soort geregistreerd, wordt getOrCreateObject3D een geïnstantieerd THREE.Object3D registreren met behulp van de doorgegeven Constructor. Als de entiteit een THREE.Object3D heeft geregistreerd onder type , zal getOrCreateObject3D fungeren als getObject3D :

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

pauze ()

pause () stopt elk dynamisch gedrag zoals gedefinieerd door animaties en componenten. Wanneer we een entiteit pauzeren, stopt deze de animaties en roept Component.pause () op voor elk van de componenten. De componenten besluiten om te implementeren wat er gebeurt tijdens pauze, wat vaak gebeurtenisluisteraars verwijdert. Een entiteit roept pause () aan op de onderliggende entiteiten wanneer we een entiteit pauzeren.

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

De component look-controls tijdens pauze verwijdert bijvoorbeeld gebeurtenishandlers die naar invoer luisteren.

Speel ()

play () start elk dynamisch gedrag zoals gedefinieerd door animaties en componenten. Dit wordt automatisch opgeroepen wanneer de DOM een entiteit toevoegt. Wanneer een entiteit play () gebruikt , roept de entiteit play () aan op de onderliggende entiteiten.

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

De geluidscomponent die wordt afgespeeld, begint bijvoorbeeld het geluid af te spelen.

setAttribute (componentName, value, [propertyValue | clobber])

Als componentName niet de naam van een geregistreerde component is of de component een component met één eigenschap is, gedraagt setAttribute zich zoals het normaal zou zijn:

entity.setAttribute('visible', false);

Hoewel als componentName de naam is van een geregistreerd component, kan het speciale parsering voor de waarde verwerken. De positiecomponent is bijvoorbeeld een component met één eigenschap, maar met de parser van het eigenschapstype kan deze een object nemen:

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

setObject3D (type, obj)

setObject3D registreert de doorgegeven obj , een THREE.Object3D , als type onder object3DMap van de entiteit. A-Frame voegt obj toe als een kind van het root- object3D van de entiteit.

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

removeAttribute (componentName, propertyName)

Indien componentnaam is de naam van een geregistreerde component, samen met het verwijderen van het kenmerk van de DOM, removeAttribute ook los van de component uit de entiteit, het aanroepen van de component methode verwijderen levenscyclus.

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

Als propertyName wordt gegeven, zal removeAttribute de eigenschapswaarde van die eigenschap die is opgegeven door propertyName opnieuw instellen op de standaardwaarde van de eigenschap:

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

removeObject3D (type)

removeObject3D verwijdert het door het type opgegeven object uit de THREE.Group van de entiteit en dus uit de scène. Dit zal de entiteit object3DMap te werken, het instellen van de waarde van het type sleutel tot nul. Dit wordt meestal vanuit een component aangeroepen, vaak in de 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 zal een status uit de entiteit verwijderen. Dit zal de gebeurtenis met de stateremoved uitzenden en we kunnen de status van de verwijdering controleren met .is :

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

EVENEMENTEN

EVENEMENT DETAILS

Hieronder staat wat het evenementendetail voor elk evenement bevat: