组件（Component）

.init ()在组件生命周期开始时被调用一次。一个实体可以调用该组件的init处理器：

• 当这个组件被静态的设置在HTML文件中的实体中，并且页面已加载。
• 当一个组件通过setAttribute设置到一个场景中的实体上。
• 当组件被设置在一个独立的实体，而实体然后连接到现场通过appendChild.

init方法通常用于：

• 设置初始状态和变量
• 绑定方法
• 附加事件侦听器

比如，一个光标组件的init方法将设置状态（state）变量，绑定方法并添加事件侦听器如下：

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方法被更新时。

update方法通常用来：

• 使用this.data完成修改实体的大部分工作。
• 每当一个或多个组件属性发生变化时被调用来修改实体。

对实体细粒度的修改可以通过在更新之前比对当前数据集（this.data）和原有数据集（oldData）来完成。

A-Frame在组件的生命周期的开始或者每一个时间组件的数据变化时调用.update()。这个 update处理器常使用this.data来修改实体。update处理器通过其第一个参数访问一个组件数据的原有状态。 我们可以使用一个组件的原有数据来告诉什么属性被更改从而实现细粒度更新。

例如，可见（visible）组件的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处理器通常用于：

• 删除，撤销或者清除对实体所有组件的修改。
• 分离事件侦听器。

比如，当light组件被删除时，光照（light）组件将删除之前设置在实体上的light对象，从而也从场景中将它删除。

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

.tick (time, timeDelta)

.tick ()在场景渲染循环的每一帧上调用。场景将调用组件的tick处理器：

• 在场景渲染循环的每一帧上。
• 按每秒60到120次的顺序。
• 如果实体或场景为被暂停（比如，查看器打开）。
• 如果实体仍然在场景中。

tick处理器通常用于：

• 连续修改每个帧或时间间隔上的实体。
• 条件轮询。

tick处理器提供场景全局的正常运行毫秒数（time）以及最后一帧后毫秒的时间差（timeDelta）。这些可以用于在指定间隔上插值或只运行部分的tick处理器。

比如，tracked controls组件将处理控制器的动画，更新控制器的位置和旋转，以及检测按钮动作。

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

.pause ()

.pause ()当实体或场景暂停时调用。实体可以调用组件的pause处理器：

• 在移除组件之前，在remove处理器被调用之前。
• 当实体被通过Entity.pause ()方法暂停时。
• 当场景被通过Scene.pause ()方法暂停时（比如，查看器被打开）。

pause处理器通常用于：

• 删除事件侦听器。
• 停止任何的动态行为。

比如，sound组件将暂停声音播放并移除关联的事件监听器：

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

.play ()

.play ()当实体或场景恢复时调用。实体可以调用一个组件的play处理器：

• 当组件第一次被附加后，在update处理器调用之后。
• 当实体被暂停，但随后通过Entity.play ()恢复。
• 当场景被暂停，但随后通过Scene.play ()恢复。

play处理器通常用于：

• 添加事件侦听器。

比如，sound组件将播放声音并更新用来在事件中播放声音的事件侦听器：

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

.updateSchema (data)

.updateSchema ()，如果定义了这个方法，将在每次更新时调用，以检查模式是否需要被动态修改。

updateSchema处理器通常用于：

• 动态更新或扩展模式，这通常取决于属性的值。

比如，geometry组件检查primitive属性是否被更改，以决定是否为不同的几何模型来更新模式：

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

定义属性

dependencies

dependencies允许对组件的初始化顺序进行控制，如果组件之间存在依赖关系的话。在dependencies数组中指定的组件名称，将在当前组件被初始化之前按从左到右的顺序来初始化。如果依赖项有其他依赖组件，那么其他依赖组件将以相同的方式进行排序：

// Initializes last.AFRAME.registerComponent('a', {  dependencies: ['b']});// Initializes second.AFRAME.registerComponent('b', {  dependencies: ['c']});// Initializes first.AFRAME.registerComponent('c', {});

multiple

multiple允许组件具有多个实例。默认情况下，由于multiple被设置为false，组件只有单个实例（单例模式）。例如，一个实体只能有一个几何（geometry）组件。

但是如果一个组件的multiple被设置为true，那么该组件将可以拥有多个实例：

AFRAME.registerComponent('foo', {  multiple: true,  // ...});

在DOM中，我们可以通过给出一个双下划线和ID的后缀来区分组件的实例。(__<ID>)。比如，要附加声音组件的多个实例：

<a-scene>  <a-entity    sound="src: url(sound.mp3)"    sound__beep="src: url(beep.mp3)"    sound__boop="src: url(boop.mp3)"  ></a-entity></a-scene>

从组件生命周期处理器中，我们可以依据this.id来区分组件的实例。如果一个组件实例被设置为foo__bar，那么this.id将为"bar"：

AFRAME.registerComponent('foo', {  multiple: true,  update: function () {    console.log('This component instance has the ID', this.id);  }});

如果我们执行一个setObject3D()，我们通常将希望使用this.attrName。如果一个组件的实例被设置为foo__bar，那么this.attrName将是foo__bar。这给了我们一个命名空间和一个ID来设置实体object3DMap中的object3D：

AFRAME.registerComponent('foo', {  multiple: true,  update: function () {    // An object3D will be set using `foo__bar` as the key.    this.el.setObject3D(this.attrName, new THREE.Mesh());  }});

组件原型方法

.flushToDOM ()

为了节省字符串化所用CPU时间，A-Frame只会在调试模式下更新组件在实际DOM中的序列化表示。调用flushToDOM ()将手动序列化组件数据并更新DOM：

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

阅读更多：component-to-DOM序列化。

访问组件的成员和方法

组件的成员和方法可以从实体中通过.components对象来访问。从实体的组件映射表（map）中查找组件，我们将可以访问组件的内部。考虑下面这个组件实例：

AFRAME.registerComponent('foo', {  init: function () {    this.bar = 'baz';  },  qux: function () {    // ...  }});

我们可以访问bar成员和qux方法：

var fooComponent = document.querySelector('[foo]').components.foo;console.log(fooComponent.bar);fooComponent.baz();