aframe
Entità

A-Frame rappresenta un'entità tramite l'elemento <a-entity> . Come definito nel modello di entità-componente-sistema, le entità sono oggetti segnaposto a cui colleghiamo componenti per fornire loro l'aspetto, il comportamento e la funzionalità.

METODI

addState (stateName)

addState spingerà uno stato sull'entità. Questo emetterà l'evento stateadded , e possiamo controllare lo stato può esistere usando .is :

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

emettere (nome, dettaglio, bolle)

emette emette un evento DOM personalizzato sull'entità. Ad esempio, possiamo emettere un evento per attivare un'animazione:

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

entity.emit('rotate');

Possiamo anche passare i dettagli dell'evento oi dati come secondo argomento:

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

L'evento si aprirà di default. possiamo dire di non fare bolle passando false per la bolla:

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

flushToDOM (ricorsivo)

flushToDOM serializzerà manualmente i dati dei componenti di un'entità e aggiornerà il DOM.

getAttribute (componentName)

getAttribute recupera i dati del componente analizzati (inclusi mixaggi e valori predefiniti).

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

Se componentName non è il nome di un componente registrato, getAttribute si comporterà come normalmente:

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

getDOMAttribute (componentName)

getDOMAttribute recupera solo i dati del componente analizzati che sono esplicitamente definiti nel DOM o tramite setAttribute . Se componentName è il nome di un componente registrato, getDOMAttribute restituirà solo i dati del componente definiti nell'HTML come oggetto analizzato. getDOMAttribute per i componenti è la forma parziale di getAttribute poiché i dati del componente restituito non includono i mixaggi applicati oi valori predefiniti:

Confronta l'output dell'esempio precedente di 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 (tipo)

getObject3D cerca un figlio THREE.Object3D a cui fa riferimento il tipo su 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)

Se l'entità non ha un THREE.Object3D registrato in tipo , getOrCreateObject3D registrerà un THREE.Object3D istanziato utilizzando il Constructor passato. Se l'entità ha un THREE.Object3D registrato sotto tipo , getOrCreateObject3D agirà come getObject3D :

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

pausa ()

pause () interromperà qualsiasi comportamento dinamico definito da animazioni e componenti. Quando mettiamo in pausa un'entità, interrompe le sue animazioni e chiama Component.pause () su ciascuno dei suoi componenti. I componenti decidono di implementare ciò che accade in pausa, che spesso rimuove i listener di eventi. Un'entità chiamerà pause () sulle sue entità figlio quando sospendiamo un'entità.

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

Ad esempio, il componente look-controls in pausa rimuoverà i gestori di eventi che ascoltano l'input.

giocare ()

play () avvierà qualsiasi comportamento dinamico definito da animazioni e componenti. Questo viene chiamato automaticamente quando il DOM allega un'entità. Quando un'entità gioca () , l'entità chiama play () sulle sue entità figlio.

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

Ad esempio, la componente audio in riproduzione inizierà a riprodurre il suono.

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

Se componentName non è il nome di un componente registrato o il componente è un componente a singola proprietà, setAttribute si comporta come normalmente:

entity.setAttribute('visible', false);

Sebbene componentName sia il nome di un componente registrato, può gestire un'analisi speciale per il valore. Ad esempio, il componente position è un componente a proprietà singola, ma il parser del tipo di proprietà consente di prendere un oggetto:

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

setObject3D (type, obj)

setObject3D registrerà l'obj passato, un THREE.Object3D, come tipo sotto object3DMap dell'entità. A-Frame aggiunge obj come figlio dell'oggetto root dell'entità3D .

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

removeAttribute (componentName, propertyName)

Se componentName è il nome di un componente registrato, insieme alla rimozione dell'attributo dal DOM, removeAttribute scollegherà anche il componente dall'entità, richiamando il metodo di rimozione del componente del componente.

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

Se propertyName viene dato, removeAttribute ripristinerà il valore della proprietà di quella proprietà specificata dal nomeProprietà al valore predefinito della proprietà:

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

removeObject3D (type)

removeObject3D rimuove l'oggetto specificato dal tipo dal THREE.Group dell'entità e quindi dalla scena. Ciò aggiornerà object3DMap dell'entità, impostando il valore della chiave del tipo su null . Questo è generalmente chiamato da un componente, spesso all'interno del gestore di rimozione:

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 popolerà uno stato dall'entità. Questo emetterà l'evento stateremoved , e possiamo controllare lo stato della sua rimozione usando .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

EVENTI

DETTAGLI DELL'EVENTO

Di seguito è riportato ciò che il dettaglio dell'evento contiene per ciascun evento: