A-frame中component的理解

前言

最近一直在用aframe1.2做3D模型的开发，需要用到大量的事件和组件，此次聊一聊对aframe中组件的理解。

---

一、什么是component

aframe是一个带有实体-组件-系统(ECS)架构的three.js框架。ECS架构是3D和游戏开发中常见和理想的模式，遵循继承和层次原则的组合。ECS的好处包括:

1. 组件可重用来定义对象，且具有更大的灵活性。
2. 消除带有复杂交织功能的长继承链的问题。
3. 通过解耦、封装、模块化和可重设计更简洁。
4. 最可伸缩的方式来构建一个虚拟现实应用程序的复杂性。
5. 允许扩展新功能(可将其作为社区组件共享)。

二、注册component

AFRAME.registerComponent('testcomp', {
  schema: {
    bar: {type: 'number'},
    baz: {type: 'string'}
  },

  init: function () {
    // 初始化组件
  },

  update: function () {
    // 组件定义属性更新
  },

  remove: function () {
    // 销毁组件
  },

  tick: function (time, timeDelta) {
    // 渲染组件
  }
});

sechema用来定义组件的属性，可以在init和update的时候来赋值从而进行后续的开发使用，remove是在销毁时触发，tick是组件渲染的时候用到的，里面有scene.renderer.time，可以进行更细致的操作。

 三、component的使用

<a-entity testcomp></a-entity>

自定义的组件可以使用组件的自定义事件，事件包括：

child-attached，child-detached，componentchanged，componentinitialized，componentremoved，loaded，object3dset，pause，play，stateadded，stateremoved，schemachanged 具体事件的说明可以参考官网：Entity – A-Frame。

---

总结

aframe的这种设计模式是很强大的，下一篇文章将自己写一个渲染模型外部边框的组件来详细说明其中的用处。