A-Frame（https:///）是一個開源框架,，用于使用自定義的HTML元素創(chuàng)建WebVR體驗。這些元素使用three.js（http:///）和WebGL（https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API）在場景中創(chuàng)建支持虛擬現(xiàn)實的元素,，而無需開發(fā)人員僅僅為了構(gòu)建簡單的體驗而去學(xué)習(xí)例如WebGL這樣的較低級別的API,。

A-Frame開發(fā)團(tuán)隊正在努力創(chuàng)建可擴展的虛擬現(xiàn)實Web,，從而允許開發(fā)人員構(gòu)建具有競爭力的API。而且,，這種思想一旦被廣泛采用和建立起來,，就很可能會成為某個定義的標(biāo)準(zhǔn)的一部分。這使我們今天能夠使用例如JavaScript框架和實驗版本的瀏覽器所提供的新功能,，而無需等待實現(xiàn)某種標(biāo)準(zhǔn)并等待此標(biāo)準(zhǔn)為瀏覽器所支持,。

接下來,，一個很重要的問題很可能就是：A-Frame框架是否是跨瀏覽器兼容的,？得到的一個出人意料的結(jié)論是：在各種平臺上，只要是WebGL兼容的瀏覽器,，A-Frame體驗效果良好,；當(dāng)然在沒有VR支持的情況下3D場景仍然看見。這意味著,，Chrome,、 Firefox、Edge和Opera這些流行的瀏覽器都能夠顯示桌面級的交互式3D體驗,。要想進(jìn)行虛擬現(xiàn)實體驗,，需要把一部例如Oculus Rift這樣的設(shè)備連接到一些支持WebVR技術(shù)的瀏覽器上，從而實現(xiàn)虛擬現(xiàn)實兼容性（請繼續(xù)看下文內(nèi)容）,。

在智能手機方面,，過去兩代的運行iOS和安卓系統(tǒng)的現(xiàn)代智能手機是最適合的（例如iPhone 6+、三星Galaxy S6+,，還有我個人的HTC One M9效果都很好）,。這其中的大多數(shù)智能手機在插入Google Cardboard耳機時也支持虛擬現(xiàn)實。所以,，相比與讓虛擬現(xiàn)實工作在您的桌面機環(huán)境而言,，VR兼容性方面在智能手機上實際上更易于實現(xiàn)與管理。

要按本文指導(dǎo)完成基于A-Frame的試驗,，你需要作如下準(zhǔn)備工作：

l 要實現(xiàn)一個基本類型的非VR體驗：

n 你需要安裝一款如上所述的支持WebGL的瀏覽器。

l 要實現(xiàn)一個基于桌面的VR體驗：

n 你需要安裝一款支持WebGL的瀏覽器,，例如最新的Chromium WebVR版本（https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ）或者Firefox的Nightly版本（https://nightly.mozilla.org/）,。

n 一款Oculus Rift耳機（也可能是HTC Vive，只是我還沒有進(jìn)行過實際測試）,。

l 要實現(xiàn)基于移動設(shè)備的VR體驗,，則需要如下：

n 最新款式的智能設(shè)備一般都能夠至少實現(xiàn)場景顯示并允許你在一個半虛擬現(xiàn)實視圖中四處觀看。

n 一款谷歌的Cardboard或者Gear VR耳機,。

如上文所述,，A-Frame樣板帶有它自己準(zhǔn)備使用的本地Web服務(wù)器,。雖然這并不總是測試你的A-Frame框架的必要情形，但是這樣做卻是一個良好的實踐并能夠減少通過您的計算機上文件系統(tǒng)運行網(wǎng)頁時出現(xiàn)的各種跨同源策略問題所帶來的困惑,。

為了運行本地Web服務(wù)器,，請從你的終端/命令提示符下切換到你的模板項目文件夾中，然后運行下面的命令︰

npm install && npm start

這將安裝Web服務(wù)器必需的所有文件,，然后運行它,。之后，如果你想要再次運行服務(wù)器,，只需運行命令“npm start”,。

一旦運行本地Web服務(wù)器，它應(yīng)會自動打開我們的web瀏覽器并加載我們的模板網(wǎng)頁文件,。模板中加入了LiveReload支持——這意味著,，無論何時更改頁面其內(nèi)容都會自動刷新。

如果你需要在不同的設(shè)備上打開網(wǎng)頁,，或者在運行本地Web服務(wù)器后網(wǎng)頁不會自動打開,，您可以通過在你的瀏覽器輸入http://localhost:3000或者http://192.168.0.1:3000。注意,，這里的IP地址正對應(yīng)于你的計算機的IP地址,。

你應(yīng)該會看到初始場景看起來像下圖所示的樣子︰

現(xiàn)在，讓我們刪除模板代碼并去掉標(biāo)記內(nèi)的所有內(nèi)容,，僅留下部分,。我們所有的A-Frame元素都將放于這個組件內(nèi)部。目前代碼如下所示：

A-Frame提供了一組原型,，這些原型提供給我們VR場景中常用的元素,。

接下來，讓我們添加一些元素來搭建一個定制場景,。

每一個場景都需要一個天空部分（或者是某種類型的背景）。這或者是一個單色圖像或者是一幅全景圖像,。這部分內(nèi)容的原型是,。

如輝煌的天空效果一樣,，使用一幅360度全景圖像將看起來更漂亮,。找到這樣的天空盒圖像的一個很好的去處是Flickr網(wǎng)站。此網(wǎng)站上提供了不少的全景圖像供大家自由重用,。

我在Flickr上發(fā)現(xiàn)了Luca Biada（https:///p/bCMJ4X）提供的如下一幅圖像：

當(dāng)我們使用如下代碼把它置于我們的場景中時：

我們可以得到該場景的一個如下圖所示的360度全景圖：

現(xiàn)在，我們有了一個場景,。接下來,，讓我們?yōu)樗砑右恍┰亍＿@要使用原型,，我們可以將一些長方體和立方體放到我們的場景中,。下面的代碼將把一個橙色的長方體添加到我們的場景內(nèi)的道路上：

代碼中的color屬性與前面我們的天空盒中的color屬性作用相同，用于指定我們的長方體元素的材質(zhì)顏色,。然后,，通過屬性depth，height和width指定形狀,。我們的長方體尺寸是2 x 2 x 4,，樣子像個很寬的盒子，隱隱約約看起來像個放到路上的紙車,。要想把盒子放到場景中的不同位置,，只需要修改一個它的position屬性即可。這個屬性使用了三個值,，分別對應(yīng)于三個坐標(biāo)軸：x軸,、y軸和z軸。

通過上述代碼創(chuàng)建的長方體，在我們的場景中看起來有如下圖所示的效果：

現(xiàn)在,，我們將使用原型把幾個柱子添加到場景的街道中：

顏色和位置屬性以與上面我們創(chuàng)建的長方體含義一致；但是,，這里還添加了兩個新屬性——height和radius,，這兩個屬性分別用于設(shè)置圓柱的高度與半徑。下圖給出的是我們添加了新柱子后的場景圖,。

于是,，我們可以非常容易地擴展上述想法。這只需要使用下面的代碼就可以添加一排柱子：

運行結(jié)果如下圖所示：

在A-Frame框架中,，圓柱體（Cylinders）還有其他許多選項可用,，讀者可以自己查閱Cylinder參考文檔（https:///docs/primitives/a-cylinder.html）。

現(xiàn)在,，我們再在3D場景中添加一個球體。這可以通過使用原型來實現(xiàn),，像下面這樣：

這段代碼直截了當(dāng),，它創(chuàng)建了一個令人有點毛骨悚然的黑色球體，漂浮在我們身后的天空中：

我們可以通過標(biāo)記將紋理添加到我們的長方體,、圓柱和球等原型上。這需要搭建一個A-Frame資源管理系統(tǒng),，使我們能夠定義資源,，然后把它們應(yīng)用于我們的形狀之上。這是推薦的把紋理添加到場景的方法,。

我下載并稍微修改了網(wǎng)址http:///dark-sharp-edges/提供的一幅圖像作為紋理使用。然后,，我們可以通過如下方式將該資源添加到我們剛剛創(chuàng)建的場景中：

上述代碼中的Id屬性給出了引用紋理并把紋理應(yīng)用于場景中的對象上時的名稱,。src屬性告訴A-Frame我們想使用的圖像文件名稱。為了給場景中的對象指定材質(zhì),，我們可以把材質(zhì)通過對象的src屬性指定——在紋理的ID前面使用哈希技術(shù),，請參考下面代碼：

通過上面的代碼，將在天空中創(chuàng)建一個隨機的,、陰森森的球體,，從效果上看將是一個更好看的、接近于科幻效果的紋理,。請參考下面的效果圖,。

要想實際在VR中觀看上述體驗,，那么你要么需要把一個Oculus Rift連接到你的PC上,，或者需要一部時髦的智能手機,！當(dāng)然，智能手機是最容易的選擇,。如果你沒有VR耳機,，那么當(dāng)你走到你的智能手機上顯示的場景中時你仍然能夠看到上面實現(xiàn)的一切。此時,，你可以搖動你的手機四處走走,；請參考下圖。

好了，如果你想在上面的A-Frame大街示例中走上一走,，那么,，很好。你可以從這里點擊A-Frame大街示例（https://www./demos/aframedemo/）去體驗一把吧,。

今天，當(dāng)我們提到WebVR時,，A-Frame無疑是一個簡單而易于使用的框架,。通過此框架，我們可以實現(xiàn)很多基于跨瀏覽器兼容的VR體驗,。其實,，我們可以使用A-Frame實現(xiàn)更多的功能。在以后的文章中我將繼續(xù)介紹這些問題,。謝謝閱讀,！