A-Frame中文教程

188博金宝网页官网(System)

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

例如,相机(camera)188博金宝网页官网管理所有实体的camera组件,控制哪个摄像机是活动摄像机。

注册一个188博金宝网页官网

188博金宝网页官网注册类似于组件

如果188博金宝网页官网名称与组件名匹配,则组件将具有一个对188博金宝网页官网的引用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

188博金宝网页官网和组件一样定义了生命周期处理器。它也可以定义希望成为公共API的方法。

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

访问一个188博金宝网页官网

可以通过场景访问实例化的188博金宝网页官网:

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

注册的188博金宝网页官网原型可以通过 AFRAME.systems 来访问。

Patterns

逻辑与数据分离

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

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);
}
});

管理188博金宝网页官网所有组件

没有严格的API定义188博金宝网页官网如何管理组件。一个常见的模式是让组件订阅188博金宝网页官网。然后188博金宝网页官网对其所有组件都有引用:

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);
}
});