aframe
enheter

A-Frame representerar en enhet via elementet <a-entity> . Som definieras i enhetens komponent-systemmönster är enheter platshållareobjekt till vilka vi ansluter komponenter för att ge dem utseende, beteende och funktionalitet.

METODER

addState (stateName)

addState kommer att pressa ett tillstånd till enheten. Detta kommer att avge den stateadded händelsen, och vi kan kontrollera tillståndet kan existera med .is :

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

avge (namn, detalj, bubblor)

emit avger en anpassad DOM-händelse på enheten. Vi kan till exempel avge en händelse för att utlösa en animation:

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

entity.emit('rotate');

Vi kan också skicka händelsedetaljer eller data som det andra argumentet:

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

Händelsen bubblar som standard. vi kan säga det att inte bubbla genom att lämna falskt för bubblan:

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

flushToDOM (rekursiv)

flushToDOM kommer att manuellt serialisera ett enhets komponenter och uppdatera DOM.

getAttribute (komponentnamn)

getAttribute hämtar analyserad komponentdata (inklusive mixins och standardinställningar).

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

Om komponentnamn inte är namnet på en registrerad komponent, kommer getAttribute att fungera som normalt:

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

getDOMAttribute (komponentnamn)

getDOMAttribute hämtar endast parsad komponentdata som uttryckligen definieras i DOM eller via setAttribute . Om komponentnamn är namnet på en registrerad komponent kommer getDOMAttribute endast att returnera de komponentdata som definierats i HTML som ett analyserat objekt. getDOMAttribute för komponenter är den partiella formen av getAttribute eftersom de returnerade komponentdata inte innehåller tillämpade mixins eller standardvärden:

Jämför utgången från ovanstående exempel på 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 letar upp ett barn TRE.Object3D hänvisat till typ på 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 (typ, konstruktör)

Om företaget inte har en THREE.Object3D registreras enligt typen kommer getOrCreateObject3D registrera ett instansieras THREE.Object3D använder passerade Constructor. Om företaget har en THREE.Object3D registrerad under typ kommer getOrCreateObject3D att fungera som getObject3D :

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

paus ()

paus () stoppar alla dynamiska beteenden som definieras av animationer och komponenter. När vi pausar en enhet kommer den att stoppa dess animationer och ringa Component.pause () på var och en av dess komponenter. Komponenterna bestämmer sig för att implementera vad som händer vid paus, vilket ofta avlägsnar händelserna. En enhet kommer att ringa paus () på sina barnenheter när vi pausar en enhet.

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

Exempelvis tar look-control-komponenten vid paus bort händelseshanterare som lyssnar efter inmatning.

spela ()

play () startar alla dynamiska beteenden som definieras av animationer och komponenter. Detta anropas automatiskt när DOM kopplar en enhet. När en enhet spelar () , kallar enheten spel () på sina barnenheter.

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

Till exempel börjar ljudkomponenten på uppspelningen spela ljudet.

setAttribute (komponentnamn, värde, [propertyValue | clobber])

Om komponentnamn inte är namnet på en registrerad komponent eller om komponenten är en komponent med en egenskap, uppträder setAttribute som det normalt skulle göra:

entity.setAttribute('visible', false);

Även om komponentnamn är namnet på en registrerad komponent, kan den hantera speciell parsing för värdet. Till exempel är positionskomponenten en komponent med en egenskap, men dess parsert för egenskapstyp tillåter den att ta ett objekt:

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

setObject3D (typ, obj)

setObject3D kommer att registrera den godkända obj , en THREE.Object3D , som typ under enhetens objekt3DMap . A-Frame lägger till obj som ett barn av företagets rotobjekt3D .

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

removeAttribute (componentName, propertyName)

Om componentName är namnet på en registrerad komponent, tillsammans med att ta bort attributet från DOM, kommer removeAttribute också att ta bort komponenten från enheten och åberopa komponentens metod för att ta bort livscykel.

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

Om egenskapsnamn anges återställer removeAttribute egenskapsvärdet för den egenskap som specificeras av egenskapsnamn till egenskapens standardvärde:

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

removeObject3D (typ)

removeObject3D tar bort objektet som anges efter typ från enhetens THREE.Group och därmed från scenen. Detta kommer att uppdatera företagets object3DMap, sätta värdet på nyckeln typ noll. Detta kallas vanligtvis från en komponent, ofta inom borttagningshanteraren:

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 kommer att visa ett tillstånd från enheten. Detta kommer att avge den stateremovedhändelsen , och vi kan kontrollera tillståndet för att det tas bort med .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

EVENEMANG

EVENEMANGSDETALJER

Nedan följer vad händelsesdetaljer innehåller för varje evenemang: