aframe
エンティティ

A-Frameは、 <a-entity>要素を介してエンティティを表します。エンティティコンポーネントシステムパターンで定義されているように、エンティティは、外観、動作、および機能を提供するためにコンポーネントをプラグインするプレースホルダオブジェクトです。

方法

addState（stateName）

addStateは状態をエンティティにプッシュします。これによりstateaddedイベントが発生し、 .isを使用して状態canを確認することができます。

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

エミット（名前、詳細、泡）

emitはエンティティでカスタムDOMイベントを発行します。たとえば、アニメーションをトリガするイベントを発生させることができます。

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

entity.emit('rotate');

イベントの詳細やデータを2番目の引数として渡すこともできます。

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

このイベントはデフォルトでバブルになります。私たちはバブルのためにfalseを渡すことによってバブルしないように伝えることができます：

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

flushToDOM（再帰的）

flushToDOMは、エンティティのコンポーネントのデータを手動でシリアル化し、DOMを更新します。

getAttribute（componentName）

getAttributeは、解析されたコンポーネントデータ（ミックスインとデフォルトを含む）を取得します。

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

componentNameが登録されたコンポーネントの名前でない場合、getAttributeは通常どおり動作します。

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

getDOMAttribute（componentName）

getDOMAttributeは、DOMまたはsetAttributeによって明示的に定義された解析済みコンポーネントデータのみを取得します。 componentNameが登録されたコンポーネントの名前である場合、 getDOMAttributeは、HTMLで定義されたコンポーネントデータのみを解析されたオブジェクトとして返します。コンポーネントのgetDOMAttributeは、返されたコンポーネントデータに適用されたmixinsまたはデフォルト値が含まれていないため、 getAttributeの部分形式です。

上記の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（タイプ）

getObject3Dは object3DMap上のタイプで参照される子THREE.Object3Dを検索します。

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（型、コンストラクタ）

エンティティタイプの下に登録THREE.Object3Dを持っていない場合は、getOrCreateObject3Dは、渡されたコンストラクタを使用してインスタンス化THREE.Object3Dを登録します。エンティティがTHREE.Object3D 型で登録されている場合、 getOrCreateObject3DはgetObject3Dとして動作します。

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

一時停止（）

pause（）は、アニメーションやコンポーネントで定義された動的な動作を停止します。エンティティを一時停止すると、アニメーションが停止し、各コンポーネントでComponent.pause（）が呼び出されます。コンポーネントは、ポーズ時に何が起こるかを実装することを決定します。これは、しばしばイベントリスナを削除します。エンティティは、エンティティを一時停止するときに、その子エンティティに対してpause（）を呼び出します。

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

たとえば、一時停止時のlook-controlsコンポーネントは、入力を待機するイベントハンドラを削除します。

遊びます （）

play（）は、アニメーションやコンポーネントで定義された動的動作を開始します。これは、DOMがエンティティをアタッチするときに自動的に呼び出されます。エンティティがplay（）すると、エンティティはその子エンティティに対してplay（）を呼び出します。

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

たとえば、再生中のサウンドコンポーネントがサウンドの再生を開始します。

setAttribute（componentName、value、[propertyValue | clobber]）

componentNameが登録されたコンポーネントの名前でない場合、またはコンポーネントが単一のプロパティーコンポーネントである場合、 setAttributeは通常どおり動作します。

entity.setAttribute('visible', false);

componentNameが登録されたコンポーネントの名前であれば、値の特殊な解析を処理することがあります。たとえば、 位置コンポーネントは単一のプロパティーコンポーネントですが、プロパティータイプのパーサーではオブジェクトを取得できます。

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

setObject3D（type、obj）

setObject3Dは、渡されたobj 、 THREE.Object3Dを 、エンティティのobject3DMapの下の型として登録します。 A-Frameは、エンティティのルートオブジェクト3Dの子としてobjを追加します。

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

removeAttribute（componentName、propertyName）

componentNameが登録されたコンポーネントの名前であり、DOMから属性を削除すると同時に、 removeAttributeは、コンポーネントのremoveライフサイクルメソッドを呼び出して、そのコンポーネントをエンティティからデタッチします。

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

propertyNameが指定されている場合、 removeAttributeはpropertyNameで指定されたプロパティのプロパティ値をプロパティのデフォルト値にリセットします。

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

removeObject3D（タイプ）

removeObject3Dは、 typeで指定されたオブジェクトをエンティティのTHREE.Groupから、したがってシーンから削除します。これは、エンティティのobject3DMapを更新し、 タイプキーの値をnullに設定します 。これは一般的にコンポーネントから呼び出されます。多くの場合、removeハンドラ内にあります。

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はエンティティから状態をポップします。これにより、 stateremovedイベントが発生し、状態を確認することができます.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

イベント

イベントの詳細

以下は、各イベントのイベントの詳細です。