實現(xiàn)Web虛擬現(xiàn)實的最輕松方案—A-Frame框架
譯文【內(nèi)容提要】本文將向你介紹一個實現(xiàn)Web虛擬現(xiàn)實支持的最易于上手的方案—A-Frame框架。A-Frame是一款開源的可通過定制HTML元素構(gòu)建WebVR方案的框架。有了這個框架，Web程序員無需學習一門全新的語言或者類似于Unity和Unreal這樣的三維引擎就可以在Web開發(fā)中加入虛擬現(xiàn)實支持。作為一個入門教程，本文將引導你一步步實現(xiàn)構(gòu)建一個加入Web虛擬現(xiàn)實支持的Web頁面的全過程。
一、 何謂A-Frame
A-Frame（https://aframe.io/）是一個開源框架，用于使用自定義的HTML元素創(chuàng)建WebVR體驗。這些元素使用three.js（http://threejs.org/）和WebGL（https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API）在場景中創(chuàng)建支持虛擬現(xiàn)實的元素，而無需開發(fā)人員僅僅為了構(gòu)建簡單的體驗而去學習例如WebGL這樣的較低級別的API。
A-Frame開發(fā)團隊正在努力創(chuàng)建可擴展的虛擬現(xiàn)實Web，從而允許開發(fā)人員構(gòu)建具有競爭力的API。而且，這種思想一旦被廣泛采用和建立起來，就很可能會成為某個定義的標準的一部分。這使我們今天能夠使用例如JavaScript框架和實驗版本的瀏覽器所提供的新功能，而無需等待實現(xiàn)某種標準并等待此標準為瀏覽器所支持。
二、 設(shè)備兼容性問題
接下來，一個很重要的問題很可能就是：A-Frame框架是否是跨瀏覽器兼容的？得到的一個出人意料的結(jié)論是：在各種平臺上，只要是WebGL兼容的瀏覽器，A-Frame體驗效果良好；當然在沒有VR支持的情況下3D場景仍然看見。這意味著，Chrome、 Firefox、Edge和Opera這些流行的瀏覽器都能夠顯示桌面級的交互式3D體驗。要想進行虛擬現(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)與管理。
三、 準備工作
要按本文指導完成基于A-Frame的試驗，你需要作如下準備工作：
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，只是我還沒有進行過實際測試）。
l 要實現(xiàn)基于移動設(shè)備的VR體驗，則需要如下：
n 最新款式的智能設(shè)備一般都能夠至少實現(xiàn)場景顯示并允許你在一個半虛擬現(xiàn)實視圖中四處觀看。
n 一款谷歌的Cardboard或者Gear VR耳機。
四、 開始工作
首先，請打開A-Frame框架的入門級教程頁面（https://aframe.io/docs/guide/getting-started.html）。目前，A-Frame團隊已經(jīng)提供了各種選項以方便進行與A-Frame框架有關(guān)的各種試驗，這包括CodePen代碼片段、一個npm構(gòu)建版本、一個A-Frame框架的JS文件（可直接下載或通過CDN取得），一個HTML模板和一個本地開發(fā)服務器。為了使事情盡可能簡單，我們將下載并直接使用A-Frame樣板（https://github.com/aframevr/aframe-boilerplate/archive/master.zip）進行工作。
把上述模板解壓到你的系統(tǒng)中你的Web項目所在位置。這個模板不必一定要運行于本地Web服務器上。模板使用來自于CDN的A-Frame框架，因此我們只需主要關(guān)注index.html文件即可。配置文件package.json中提供了一個基于npm的本地Web服務器用于測試目的。在本文中，我們將使用這個服務器——然而，現(xiàn)在不必測試它。
五、 啟動本地服務器
如上文所述，A-Frame樣板帶有它自己準備使用的本地Web服務器。雖然這并不總是測試你的A-Frame框架的必要情形，但是這樣做卻是一個良好的實踐并能夠減少通過您的計算機上文件系統(tǒng)運行網(wǎng)頁時出現(xiàn)的各種跨同源策略問題所帶來的困惑。
為了運行本地Web服務器，請從你的終端/命令提示符下切換到你的模板項目文件夾中，然后運行下面的命令︰
npm install && npm start
這將安裝Web服務器必需的所有文件，然后運行它。之后，如果你想要再次運行服務器，只需運行命令“npm start”。
一旦運行本地Web服務器，它應會自動打開我們的web瀏覽器并加載我們的模板網(wǎng)頁文件。模板中加入了LiveReload支持——這意味著，無論何時更改頁面其內(nèi)容都會自動刷新。
如果你需要在不同的設(shè)備上打開網(wǎng)頁，或者在運行本地Web服務器后網(wǎng)頁不會自動打開，您可以通過在你的瀏覽器輸入http://localhost:3000或者http://192.168.0.1:3000。注意，這里的IP地址正對應于你的計算機的IP地址。
你應該會看到初始場景看起來像下圖所示的樣子︰
六、 構(gòu)建新場景
現(xiàn)在，讓我們刪除模板代碼并去掉<body>標記內(nèi)的所有內(nèi)容，僅留下<a-scene>部分。我們所有的A-Frame元素都將放于這個<a-scene>組件內(nèi)部。目前代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Our First A-Frame Experience</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
</a-scene>
</body>
</html>
A-Frame提供了一組原型，這些原型提供給我們VR場景中常用的元素。
接下來，讓我們添加一些元素來搭建一個定制場景。
七、 創(chuàng)建天空
每一個場景都需要一個天空部分（或者是某種類型的背景）。這或者是一個單色圖像或者是一幅全景圖像。這部分內(nèi)容的原型是<a-sky>。
使用單色圖像實現(xiàn)的天空部分的代碼如下所示：
這將為我們的目標場景創(chuàng)建一個可愛的自然明亮的紫紅色天空效果，如下圖所示：
猶如輝煌的天空效果一樣，使用一幅360度全景圖像將看起來更漂亮。找到這樣的天空盒圖像的一個很好的去處是Flickr網(wǎng)站。此網(wǎng)站上提供了不少的全景圖像供大家自由重用。
我在Flickr上發(fā)現(xiàn)了Luca Biada（https://flic.kr/p/bCMJ4X）提供的如下一幅圖像：
當我們使用如下代碼把它置于我們的場景中時：
我們可以得到該場景的一個如下圖所示的360度全景圖：
八、 加入一個長方體
現(xiàn)在，我們有了一個場景。接下來，讓我們?yōu)樗砑右恍┰?。這要使用<a-box>原型，我們可以將一些長方體和立方體放到我們的場景中。下面的代碼將把一個橙色的長方體添加到我們的場景內(nèi)的道路上：
<a-box color="#B76705" depth="2" height="2" width="4" position="0 0 -1.25"></a-box>
代碼中的color屬性與前面我們的天空盒中的color屬性作用相同，用于指定我們的長方體元素的材質(zhì)顏色。然后，通過屬性depth，height和width指定形狀。我們的長方體尺寸是2 x 2 x 4，樣子像個很寬的盒子，隱隱約約看起來像個放到路上的紙車。要想把盒子放到場景中的不同位置，只需要修改一個它的position屬性即可。這個屬性使用了三個值，分別對應于三個坐標軸：x軸、y軸和z軸。
通過上述代碼創(chuàng)建的長方體，在我們的場景中看起來有如下圖所示的效果：
九、 加入幾個圓柱體
現(xiàn)在，我們將使用<a-cylinder>原型把幾個柱子添加到場景的街道中：
<a-cylinder color="#1E130E" height="40" radius="0.5" position="-40 0 -8"></a-cylinder>
顏色和位置屬性以與上面我們創(chuàng)建的長方體含義一致；但是，這里還添加了兩個新屬性——height和radius，這兩個屬性分別用于設(shè)置圓柱的高度與半徑。下圖給出的是我們添加了新柱子后的場景圖。
于是，我們可以非常容易地擴展上述想法。這只需要使用下面的代碼就可以添加一排柱子：
<a-cylinder color="#1E130E" height="40" radius="0.5" position="-40 0 -8"></a-cylinder>
<a-cylinder color="#1E130E" height="40" radius="0.5" position="-10 0 -8"></a-cylinder>
<a-cylinder color="#1E130E" height="40" radius="0.5" position="20 0 -8"></a-cylinder>
<a-cylinder color="#1E130E" height="40" radius="0.5" position="50 0 -7"></a-cylinder>
運行結(jié)果如下圖所示：
在A-Frame框架中，圓柱體（Cylinders）還有其他許多選項可用，讀者可以自己查閱Cylinder參考文檔（https://aframe.io/docs/primitives/a-cylinder.html）。
十、 再加入一個球體
現(xiàn)在，我們再在3D場景中添加一個球體。這可以通過使用<a-sphere>原型來實現(xiàn)，像下面這樣：
<a-sphere color="#000000" radius="2" position="0 15 20"></a-sphere>
這段代碼直截了當，它創(chuàng)建了一個令人有點毛骨悚然的黑色球體，漂浮在我們身后的天空中：
十一、 添加材質(zhì)
我們可以通過<a-assets>標記將紋理添加到我們的長方體、圓柱和球等原型上。這需要搭建一個A-Frame資源管理系統(tǒng)，使我們能夠定義資源，然后把它們應用于我們的形狀之上。這是推薦的把紋理添加到場景的方法。
我下載并稍微修改了網(wǎng)址http://subtlepatterns.com/dark-sharp-edges/提供的一幅圖像作為紋理使用。然后，我們可以通過如下方式將該資源添加到我們剛剛創(chuàng)建的場景中：
上述代碼中的Id屬性給出了引用紋理并把紋理應用于場景中的對象上時的名稱。src屬性告訴A-Frame我們想使用的圖像文件名稱。為了給場景中的對象指定材質(zhì)，我們可以把材質(zhì)通過對象的src屬性指定——在紋理的ID前面使用哈希技術(shù)，請參考下面代碼：
<a-sphere src="#darktexture" radius="2" position="0 15 20"></a-sphere>
通過上面的代碼，將在天空中創(chuàng)建一個隨機的、陰森森的球體，從效果上看將是一個更好看的、接近于科幻效果的紋理。請參考下面的效果圖。
十二、 運行效果展示
要想實際在VR中觀看上述體驗，那么你要么需要把一個Oculus Rift連接到你的PC上，或者需要一部時髦的智能手機！當然，智能手機是最容易的選擇。如果你沒有VR耳機，那么當你走到你的智能手機上顯示的場景中時你仍然能夠看到上面實現(xiàn)的一切。此時，你可以搖動你的手機四處走走；請參考下圖。
如果你有一個與你的手機一起使用的Google Cardboard耳機，你可以點擊右下角的VR圖標切換到VR視圖下，請參考下圖。
十三、 VR體驗
好了，如果你想在上面的A-Frame大街示例中走上一走，那么，很好。你可以從這里點擊A-Frame大街示例（https://www.devdiner.com/demos/aframedemo/）去體驗一把吧。
十四、 小結(jié)
今天，當我們提到WebVR時，A-Frame無疑是一個簡單而易于使用的框架。通過此框架，我們可以實現(xiàn)很多基于跨瀏覽器兼容的VR體驗。其實，我們可以使用A-Frame實現(xiàn)更多的功能。在以后的文章中我將繼續(xù)介紹這些問題。謝謝閱讀！
