aframe
コンポーネント

エンティティ・コンポーネント・システム・パターンでは、コンポーネントは、外観、動作、および/または機能性を追加するためにエンティティにプラグインする、再利用可能でモジュール式のデータ・チャンクです。

A-Frameでは、コンポーネントはシーン内の3Dオブジェクトであるエンティティを変更します。コンポーネントを組み合わせて複合オブジェクトを構築します。それらは、HTMLから宣言的に使用できるモジュールにthree.jsとJavaScriptコードをカプセル化しました。コンポーネントはCSSとほぼ同じです。

定義ライフサイクルハンドラメソッド

スキーマが解剖学的構造であるため、ライフサイクルの方法は生理学である。スキーマはデータの形状を定義し、ライフサイクルハンドラメソッドはデータを使用してエンティティを変更します。ハンドラは通常、 Entity APIと対話します 。

メソッドの概要

コンポーネントのプロトタイププロパティ

メソッドの中で、私たちは、経由してコンポーネントのプロトタイプにアクセスすることができthis ：

方法

。その中に （）

.init ()は、コンポーネントのライフサイクルの始めに一度呼び出されます。エンティティはコンポーネントのinitハンドラを呼び出すことができます：

• コンポーネントがHTMLファイル内のエンティティに静的に設定され、ページがロードされたとき。
• コンポーネントがsetAttributeを介して添付エンティティに設定されている場合。
• コンポーネントが添付されていないエンティティに設定され、そのエンティティがappendChildを介してシーンにアタッチされるとき。

initハンドラはしばしば次の目的で使用されます。

• 初期状態と変数を設定する
• バインドメソッド
• イベントリスナーをアタッチする

たとえば、カーソルコンポーネントのinitは、状態変数を設定し、メソッドをバインドし、イベントリスナーを追加します。

AFRAME.registerComponent('cursor', {
  // ...
  init: function () {
    // Set up initial state and variables.
    this.intersection = null;
    // Bind methods.
    this.onIntersection = AFRAME.utils.bind(this.onIntersection, this);
    // Attach event listener.
    this.el.addEventListener('raycaster-intersection', this.onIntersection);
  }
  // ...
});

.update（oldData）

.update (oldData)は、コンポーネントのライフサイクルの開始時を含め、コンポーネントのプロパティが変更されるたびに呼び出されます。エンティティはコンポーネントのupdateハンドラを呼び出すことができます：

• init ()が呼び出された後、コンポーネントのライフサイクルの始めに。
• コンポーネントのプロパティが.setAttribute更新される.setAttribute 。

updateハンドラは、多くの場合次の目的で使用されます。

• ほとんどの作業はthis.dataを使用してエンティティに変更をthis.dataます。
• 1つ以上のコンポーネントプロパティが変更されるたびにエンティティを変更します。

エンティティへの粒状修正が[相違取得] [差分]により行うことができる現在のデータセット（ this.data更新（前の前のデータセットを有する） oldData ）。

A-Frameは、コンポーネントのライフサイクルの開始時およびコンポーネントのデータが変更されるたびに（たとえば、 setAttribute結果として.update()呼び出します。更新ハンドラは、多くの場合this.dataを使用してエンティティを変更します。更新ハンドラは、最初の引数を介してコンポーネントのデータの前の状態にアクセスできます。コンポーネントの以前のデータを使用して、細かい更新を行うために変更されたプロパティを正確に伝えることができます。

たとえば、 可視コンポーネントのupdateによって、エンティティの可視性が設定されます。

AFRAME.registerComponent('visible', {
  /**
   * this.el is the entity element.
   * this.el.object3D is the three.js object of the entity.
   * this.data is the component's property or properties.
   */
  update: function (oldData) {
    this.el.object3D.visible = this.data;
  }
  // ...
});

.remove（）

.remove ()は、コンポーネントがエンティティから切り離されるたびに呼び出されます。エンティティはコンポーネントのremoveハンドラを呼び出すことができます：

• コンポーネントがremoveAttributeを介してエンティティから削除されたとき。
• エンティティがシーンから切り離されたとき（ removeChild ）

removeハンドラは、多くの場合次の目的で使用されます。

• エンティティに対するすべてのコンポーネントの変更を削除、元に戻す、またはクリーンアップします。
• イベントリスナーを切り離します。

たとえば、[ライトコンポーネント] [ライト]が削除されると、ライトコンポーネントはエンティティに以前設定したライトオブジェクトを削除し、シーンから削除します。

AFRAME.registerComponent('light', {
  // ...
  remove: function () {
    this.el.removeObject3D('light');
  }
  // ...
});

.tick（time、timeDelta）

.tick ()は、シーンのレンダーループのティックまたはフレームごとに呼び出されます。シーンはコンポーネントのtickハンドラを呼び出します：

• レンダリングループの各フレームで。
• 毎秒60〜120回のオーダー。
• エンティティまたはシーンが一時停止していない場合（インスペクタが開いているなど）
• エンティティがまだシーンにアタッチされている場合

tickハンドラはしばしば次の目的で使用されます。

• 各フレームまたは一定間隔でエンティティを継続的に変更します。
• 条件の投票。

tickハンドラには、ミリ秒（ time ）単位でのシーンのグローバルな稼働時間と、最後のフレーム（ timeDelta ）からの時間差（ミリ秒単位）が提供されます。補間に使用することも、指定された間隔でtickハンドラの部分だけを実行することもできます。

たとえば、 追跡されたコントロールコンポーネントは、コントローラのアニメーションを進行させ、コントローラの位置と回転を更新し、ボタンの押下をチェックします。

AFRAME.registerComponent('tracked-controls', {
  // ...
  tick: function (time, timeDelta) {
    this.updateMeshAnimation();
    this.updatePose();
    this.updateButtons();
  }
  // ...
});

.pause（）

エンティティまたはシーンが一時停止すると、 .pause ()が呼び出されます。エンティティはコンポーネントのpauseハンドラを呼び出すことができます：

• コンポーネントが削除される前に、 removeハンドラが呼び出される前。
• エンティティがEntity.pause ()一時停止している場合
• シーンがScene.pause ()一時停止しているScene.pause ()インスペクタが開いているなど）

pauseハンドラは、多くの場合次の目的で使用されます。

• イベントリスナーを削除します。
• 動的な動作の可能性を排除します。

たとえば、 サウンドコンポーネントはサウンドを一時停止し、イベントでサウンドを再生したイベントリスナーを削除します。

AFRAME.registerComponent('sound', {
  // ...
  pause: function () {
    this.pauseSound();
    this.removeEventListener();
  }
  // ...
});

。遊びます （）

.play ()は、エンティティまたはシーンが再開するときに呼び出されます。エンティティはコンポーネントのplayハンドラを呼び出すことができます：

• コンポーネントが最初にアタッチされるとき、 updateハンドラが呼び出された後。
• エンティティが一時停止された後、 Entity.play ()再開されたEntity.play () 。
• シーンが一時停止した後、 Scene.play ()再開したScene.play () 。

playハンドラは、多くの場合、

• イベントリスナーを追加します。

たとえば、 サウンドコンポーネントはサウンドを再生し、イベントでサウンドを再生するイベントリスナを更新します。

AFRAME.registerComponent('sound', {
  // ...
  play: function () {
    if (this.data.autoplay) { this.playSound(); }
    this.updateEventListener();
  }
  // ...
});

.updateSchema（data）

.updateSchema ()が定義されている場合は、スキーマを動的に変更する必要があるかどうかを確認するために、更新ごとに.updateSchema ()が呼び出されます。

updateSchemaハンドラは、多くの場合次のupdateSchema使用されます。

• 通常はプロパティの値に応じて、スキーマを動的に更新または拡張します。

たとえば、 ジオメトリコンポーネントは、 primitiveプロパティが変更されて、異なるタイプのジオメトリのスキーマを更新するかどうかを確認します。

AFRAME.registerComponent('geometry', {
  // ...
  updateSchema: (newData) {
    if (newData.primitive !== this.data.primitive) {
      this.extendSchema(GEOMETRIES[newData.primitive].schema);
    }
  }
  // ...
});

成分プロトタイプ法

.flushToDOM（）

文字列化のCPU時間を節約するため、A-Frameは実際のDOMでのコンポーネントのシリアライズされた表現のみをデバッグモードで更新します。 flushToDOM（）を呼び出すと、コンポーネントのデータが手動でシリアル化され、DOMが更新されます。

document.querySelector('[geometry]').components.geometry.flushToDOM();