A-Frame中文教程

系统(System)

实体-组件-系统模式中的一个系统为组件类提供全局范围,服务和管理。它为组件类提供公共API(方法和属性)。一个系统可以通过场景元素来访问,并能帮助组件和全局场景交互。

例如,相机(camera)系统管理所有实体的camera组件,控制哪个摄像机是活动摄像机。

注册一个系统

系统注册类似于组件

如果系统名称与组件名匹配,则组件将具有一个对系统的引用this.system

AFRAME.registerSystem('my-component', {
schema: {}, // System schema. Parses into `this.data`.
init: function () {
// Called on scene initialization.
},
// Other handlers and methods.
});
AFRAME.registerComponent('my-component', {
init: function () {
console.log(this.system);
}
});

属性

属性 描述
schema 组件模式表现一样。解析为data
data 模式中通过处理器和方法提供的数据。

Methods

系统和组件一样定义了生命周期处理器。它也可以定义希望成为公共API的方法。

方法 描述
init 初始化系统时调用一次。用于初始化。
pause 场景暂停时调用。用于停止动态行为。
play 场景启动或恢复时调用。用于启动动态行为。
tick 如果被定义,将在场景渲染循环的每一瞬间调用。

访问一个系统

可以通过场景访问实例化的系统:

document.querySelector('a-scene').systems[systemName];

Registered system prototypes can be accessed through AFRAME.systems.

Patterns

逻辑与数据分离

如果需要,系统可以帮助将逻辑和行为与数据分开。我们让系统处理繁重的工作,而组件只需要操心通过其生命周期方法管理数据:

AFRAME.registerSystem('my-component', {
createComplexObject: function (data) {
// Do calculations and stuff with data.
return new ComplexObject(data);
}
});
AFRAME.registerComponent('my-component', {
init: function () {
this.myObject = null;
},
update: function () {
// Do stuff with `this.data`.
this.myObject = this.system.createComplexObject(data);
}
});

管理系统所有组件

没有严格的API定义系统如何管理组件。一个常见的模式是让组件订阅系统。然后系统对其所有组件都有引用:

AFRAME.registerSystem('my-component', {
init: function () {
this.entities = [];
},
registerMe: function (el) {
this.entities.push(el);
},
unregisterMe: function (el) {
var index = this.entities.indexOf(el);
this.entities.splice(index, 1);
}
});
AFRAME.registerComponent('my-component', {
init: function () {
this.system.registerMe(this.el);
},
remove: function () {
this.system.unregisterMe(this.el);
}
});