本文為A-Frame簡明教程系列文章的第三篇，大家可以到專題里了解更多。
實體組件系統(tǒng)
1. 概述
實體-組件-系統(tǒng)(Entity Component System, ECS)是三維游戲中常見且理想的設計模式，A-Frame同樣采用了ECS模式。
ECS的基本定義包括：
-
實體是容器對象，用來包含組件。實體是場景中所有對象的基礎。沒有附加組件的實體不會渲染任何東西，類似于空的
<div>。 - 組件是可重用的模塊或數(shù)據(jù)容器，可以依附于實體以提供外觀、行為、功能。組件就像即插即用的對象，所有的邏輯都是通過組件實現(xiàn)，并通過混合、匹配和配置組件來定義不同類型的對象。
- 系統(tǒng) 為組件提供全局范圍、管理和服務。系統(tǒng)通常是可選的，可以用來分離邏輯和數(shù)據(jù)；系統(tǒng)處理邏輯，組件充當數(shù)據(jù)容器。
ECS的優(yōu)勢：
- 模塊化
- 靈活性
- 復用性
- 擴展性
2. 語法
A-Frame采用聲明式、基于DOM的方式實現(xiàn)ECS，組件以實體屬性的方式進行聲明，語法如下。
<a-entity ${componentName}="${propertyName1}: ${propertyValue1}; ${propertyName2:}: ${propertyValue2}">
組件以a-entity標簽的html屬性形式出現(xiàn)，以類似于html標簽的style屬性形式出現(xiàn)（屬性名和屬性值中間用冒號，多個屬性之間用分號隔開，如下代碼所示）。
<div style="color:red; font-size:18px; ">
在前面我們曾經(jīng)講過a-box的使用，其實它可以采用類外一種寫法。
<a-box color="red" position="0 0 -10"></a-box>
<!--等價于-->
<a-entity geometry="primitive: box" material="color: red" position="0 0 -10"></a-entity>
其中，geometry、 material、position等都是以組件的方式出現(xiàn)的，用來給實體a-entity提供外形、行為、功能等。
3. 組件的注冊和使用
3.1注冊組件
注冊組件的語法如下：
// Registering component in foo-component.js
AFRAME.registerComponent('foo', {
//定義和描述組件屬性(屬性類型、默認值等)
schema: {},
//初始化組件時調(diào)用一次。用于設置初始狀態(tài)和實例化變量。
init: function () {},
//在組件初始化和任何組件屬性更新時調(diào)用。
update: function () {},
//場景渲染循環(huán)的每一幀上調(diào)用。連續(xù)修改某個時間間隔上的實體或條件輪詢。
tick: function () {},
//在組件被從實體中刪除時或者當實體從場景中分離時被調(diào)用。
remove: function () {},
//每當場景或實體暫停來刪除任意背景或動態(tài)行為時被調(diào)用。
pause: function () {},
//每當場景或實體播放來添加任意背景或動態(tài)行為時被調(diào)用。
play: function () {}
});
3.2使用組件
<!-- Usage of `foo` component. -->
<html>
<head>
<script src="aframe.min.js"></script>
<script src="foo-component.js"></script>
</head>
<body>
<a-scene>
<a-entity foo></a-entity>
</a-scene>
</body>
</html>
4. 案例解析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A-Frame簡明教程之實體組件系統(tǒng)</title>
<!--導入aframe庫-->
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<!--注冊組件的JS，一般寫在外部JS中，這里為了現(xiàn)實方便放在頁面內(nèi)部JS中。-->
<script type="text/javascript">
//隨機顏色
AFRAME.registerComponent('random-color', {
schema: {
min: {default: {x: 0, y: 0, z: 0}, type: 'vec3'},
max: {default: {x: 1, y: 1, z: 1}, type: 'vec3'}
},
update: function () {
var data = this.data;
var max = data.max;
var min = data.min;
this.el.setAttribute('material', 'color', '#' + new THREE.Color(
Math.random() * max.x + min.x,
Math.random() * max.y + min.y,
Math.random() * max.z + min.z
).getHexString());
}
});
//隨機位置
AFRAME.registerComponent('random-position', {
schema: {
min: {default: {x: -10, y: -10, z: -10}, type: 'vec3'},
max: {default: {x: 10, y: 10, z: 10}, type: 'vec3'}
},
update: function () {
var data = this.data;
var max = data.max;
var min = data.min;
this.el.setAttribute('position', {
x: Math.random() * (max.x - min.x) + min.x,
y: Math.random() * (max.y - min.y) + min.y,
z: Math.random() * (max.z - min.z) + min.z
});
}
});
//生成盒子
AFRAME.registerComponent('entity-generator', {
schema: {
mixin: {default: ''},
num: {default: 1000}
},
init: function () {
var data = this.data;
// 使用指定的mixin生成實體
for (var i = 0; i < data.num; i++) {
var entity = document.createElement('a-entity');
entity.setAttribute('mixin', data.mixin);
this.el.appendChild(entity);
}
}
});
</script>
</head>
<body>
<a-scene>
<!--資源庫-->
<a-assets>
<!--利用混合的方式定制模版-->
<a-mixin id="random" geometry="primitive: box" random-position random-color>
</a-mixin>
</a-assets>
<!--生成實體-->
<a-entity entity-generator="mixin:random;num:1000;"></a-entity>
</a-scene>
</body>
</html>
案例注釋寫的非常清楚，就不一一給大家解釋啦，有問題歡迎大家交流。
待續(xù)
接下來，我們將繼續(xù)研究A-Frame，敬請期待！歡迎大家批評指正??！
聲明
愛前端，樂分享。FedFun希望與您共同進步。
歡迎任何形式的轉載，煩請注明裝載，保留本段文字。
獨立博客http://whqet.github.io
極客頭條http://geek.csdn.net/user/publishlist/whqet
CSDN博客http://blog.csdn.net/whqet/
我的簡書http://www.itdecent.cn/u/c11d4318b3c7
