【本文翻譯自A-Frame官網(wǎng)，原文見擴展閱讀】
首先啊炼邀，為什么要叫概覽2呢魄揉？因為概覽一時沒用markdown代碼顯示不方便被刪了。概覽2就是概覽一：）拭宁。
A-Frame 是什么呢洛退？A-Frame是一個在web上用來實現(xiàn)3D和虛擬現(xiàn)實體驗的開源框架。它是由MozVR team建立來為了更快的實現(xiàn)原生WebVR的效果杰标，顯然我們會不由自主地自問“虛擬現(xiàn)實在web上實現(xiàn)會是什么樣呢兵怯？”在現(xiàn)在的網(wǎng)頁上，我們都是通過點擊鏈接在頁面直接跳轉(zhuǎn)腔剂，未來我們一定可以通過步入一個哆啦A夢的傳送門從一個世界跳轉(zhuǎn)到另一個世界（應(yīng)該是指的虛擬現(xiàn)實的不通場景切換）媒区。為了擁有能夠跳轉(zhuǎn)的“世界”，我們需要webVR掸犬。不幸的是袜漩，這個世界上只有一大把WebGL的基佬開發(fā)者，但是呢web攻城獅湾碎，網(wǎng)頁設(shè)計師和3D藝術(shù)家卻卻成千上百萬宙攻。怎么辦呢？不用擔(dān)心A-Frame就是為了我等對webGL沒多大研究的人而生的介褥。話不多說座掘，先hello world：
<html>
<head>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box color="#6173F4" width="4" height="10" depth="2"> </a-box>
<a-collada-model src="monster.dae" position="-1 0.5 1" rotation="0 45 0 "></a-collada-model>
<a-image src="fox.png"></a-image>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
A-Frame 允許我們創(chuàng)建跨平臺的VR場景，無論是桌面還是Oculus Rift 或者僅使用html的移動平臺柔滔。我們可以放下那些復(fù)雜的庫類僅通過幾行類似html的標(biāo)記語言就可以讓VR場景跑起來溢陪，聽起來是不是有點小激動呢？因為A-Frame是建立在HTML之上的睛廊，所以呢形真，我們可以像我們平時用js處理html元素一樣處理它，同時我們可以繼續(xù)使用我們喜歡的js庫和框架（e.g：d3,React）.但是一個重要的因素是A-Frame介紹了theentity-component-system pattern用中文就是“實體部件系統(tǒng) 模式”超全，一種在3D和游戲開發(fā)中通用的模式咆霜，到HTML中使其模塊化，具有擴展性和靈活性卵迂。如果我們把3D使用到網(wǎng)頁里裕便，我們需要適應(yīng)工業(yè)界已經(jīng)存在的模式绒净。在栗子中的場景實際上使用了便利元素（就是別人已經(jīng)做好的東西见咒，比如模型）；在A-Frame中挂疆，是這樣實現(xiàn)的：
<html>
<body>
<a-scene>
<a-entity geometry="primitive: box; depth: 1; height: 1; width: 1" material="color: #4CC3D9" position="-1 0.5 1" rotation="0 45 0"></a-entity>
<a-entity collada-model="monster.dae"></a-entity>
<a-entity geometry="primitive: plane" material="src: url(fox.png)"></a-entity>
<a-entity geometry="primitive: sphere; radius: 5000" material="color: #EF2D5E" scale="-1 1 1"></a-entity>
</a-scene>
</body>
</html>
在底層改览，A-Frame 是建立在 Custom Elements之上且由three.js（http://www.hewebgl.com 上有相關(guān)中文教程下翎，寫得不錯）提供支持。雖然A-Frame初看僅僅只是一些常見的類似于<a-cube>的HTML元素宝当，但是它的根本是長的像文本對象模型的基于three.js框架的實體部件系統(tǒng)视事。A-Frame場景的每一樣事物都是一個添加了外形動作功能的組件的實體。這就允許了有經(jīng)驗的開發(fā)者分享他們可以被重復(fù)利用的組件庆揩，其他開發(fā)者也可以在他們的場景中快速利用這些組件俐东。上面所說的看起來有點冗長，但是知道它會產(chǎn)生真正的能量當(dāng)我們能夠隨心所欲的制作外觀和行為：
<html>
<body>
<a-scene>
<!-- Configure entity object by adding more components. -->
<a-entity geometry="primitive: box; depth: 1; height: 1; width: 1" material="color: #4CC3D9" position="-1 0.5 1" rotation="0 45 0" physics="boundingBox: 1 1 1; mass: 2" explode="on: collide" template="src: butterflies.template; type: nunjucks" speech-controls="trigger: siri"></a-entity>
<a-entity collada-model="monster.dae"></a-entity>
<a-entity geometry="primitive: plane" material="src: url(fox.png)"></a-entity>
<a-entity geometry="primitive: sphere; radius: 5000" material="color: #EF2D5E" scale="-1 1 1"></a-entity>
</a-scene>
</body>
</html>
通過通讀文檔可以獲取更多細節(jié)订晌，在閱讀或使用當(dāng)中虏辫，如果你遇到任何問題，可以加入在Slack的成千上萬的開發(fā)者中去討論锈拨！歡迎來到網(wǎng)頁的未來砌庄。
欣賞一下那些厲害的家伙做的很贊的東西。
