A-FRAME WEBVR（網頁虛擬現實）快速開發入門教程

WebVR和WebGL應用程序接口使得我們已經可以在瀏覽器上創建虛擬現實（VR）體驗，但從工程化的角度而言，開發社區還需要更多方便強大的開發庫來簡化編程，Mozilla的 A-Frame 框架就是這樣一個工具，提供了一個Web開發者所熟悉的標記語言來快速構建3D VR場景動畫原型，而不需要編寫過多的JavaScript和GLSL語句。本文將介紹如何使用A-Frame構建一個簡單的在線可運行實例。

參考文檔：A-Frame中文教程

概覽

當前A-Frame版本是0.5.0，由於WebVR標準乃至WebGL標準都還在快速發展演進中，因此A-Frame仍然處於高度技術實驗的狀態，遠未達成商業成熟。但是對於開啟了相應設置的最新瀏覽器而言，A-Frame是可以正常工作的。它可以在桌面、移動設備（iOS和Android）、Oculus Rift, Gear VR 和 HTC Vive上運行。

A-Frame 構建在WebGL接口之上（事實上其內置了Three.js開發框架），併為應用程序提供了一些預裝基礎組件如 - 模型、視頻播放器、天空環境、幾何模型、控制器、動畫和鼠標等。A-Frame 基於遊戲領域常用的實體組件系統（entity component system），但定位於Web開發，使用標記語言以及使用JavaScript語言來進行操作，最終達到在網頁中獲得3D虛擬現實體驗的設計目標。

搭建開發環境

我們首先需要搭建A-Frame的開發環境，這裡和以往一樣我們藉助踏得網在線開發平臺：

• 首先要有一個現代瀏覽器，支持WebGL和WebVR，比如最新版本的Firefox（Firefox Nightly）或Chrome（v54+）。
• （可選）設置一個VR設備如Oculus Rift、HTC Vive或者 Google Cardboard。
• 在踏得網在線開發平臺上新建作品（從菜單中選擇新建或按快捷鍵Ctrl+M）。
• 在左側“第三方庫”標籤欄中選擇A-Frame 0.5.0，

• 
  
• 這將在作品中自動引入A-Frame的最新JS腳本庫。

HTML代碼結構

第一步我們先創建一個空HTML文檔，在HTML面板中編寫如下代碼：

（如果你使用了踏得網在線開發平臺，此步驟可跳過，因為平臺會自動為您生成這些重複性代碼但並不顯示。）

初始化場景

場景（scene）是所有VR內容的容器，當創建新的對象後，我們只有把這些對象加到場景中，才能真正在屏幕上被看到。在 A-Frame 中，場景通過一個 場景實體（Scene entity）元素來表達。

注意：一個實體（Entity）可以是任意元素 - 可以是盒子、圓柱、圓錐對象，也可以是一個相機（camera）、光源（light）或者聲源（sound）。

我們通過在

添加幾何模型

接著我們在 元素中添加一個 元素，這等於是在場景中添加一個立方體：

上述代碼中，該立方體對象包含一些已定義屬性：顏色（color）, 位置（position）和角度（rotation）。

注意：這裡的距離數值（比如立方體的y座標位置）是無單位的，也可以是任何適用於你的場景的單位 - 毫米，米，英尺或英里 - 由你自己來定。

我們還可以添加一些其他基礎模型如圓柱體等，這裡代碼略過，我們在文章最後會給出完整的在線實例。

添加一個背景：天空盒（Sky box）

一個天空盒（skybox）是三維世界的背景，通過一個 元素來表示。在這裡，我們使用一個簡單的顏色背景，但它也可以是一個圖像（image）等。環顧四周的時候可以營造一種在天空中或者木質車庫或者任何你喜歡的環境中的感覺。添加如下的標記代碼在 元素之前：

到這裡，如果你點擊菜單中的“運行”按鈕（或者按CTRL+R快捷鍵），我們將看到一個帶背景的立方體，並且可以通過鼠標（如果是通過電腦屏幕查閱該作品）操控它：

我們很容易就完成了一個VR小應用，這是因為 A-Frame 幫我們做了很多事情：

• 該應用程序包含了一個缺省的光源和相機，所以我們能看到場景中的模型。
• 有現成可用的操作控制器：可以360°瀏覽，可以通過鍵盤上的WASD按鍵來行走。
• 屏幕右下角還有一個"Enter VR mode"按鈕（眼鏡形狀的圖標），可以切換到全屏模式，如果你設置好了VR設備，那麼將可以進入虛擬現實模式。

指定一個相機

相機通過 元素來添加到場景中。我們可以顯式設置相機的位置，把相機放在場景中心稍退後一點的位置上，這樣我們能看清模型形狀，我們把該元素添加在場景元素的關閉標籤 之前：

position="0 1 4"

cursor-visible="true"

cursor-scale="2"

cursor-color="#0095DD"

cursor-opacity="0.5">

上述代碼中，我們還通過 cursor-* 屬性給相機定義了遊標（cursor，缺省情況下不可見）- 我們設置了遊標的縮放因子（scale），這樣就更容易被看見，透明度設置為0.5，這樣不會完全擋住遊標後面的物體。

添加光源

A-Frame中的基礎光源類型是平行光（directional light）和環境光（ambient light）。平行光被放在場景某處而環境光是來自該平行光的反射，這樣光線看起來比較自然。光源元素的標籤為 ，把下面的代碼添加到前述相機元素之後：

type="directional"

color="#FFF"

intensity="0.5"

position="-1 1 2">

type="ambient"

color="#FFF">

這樣我們添加了一個白色平行光，光強為0.5，位置在 (-1, 1, 2) 。環境光也是白色。

添加高級模型

前面我們通過 添加過立方體，但是A-Frame並不侷限於只能添加固定模型，還可以添加自定義的複雜形狀模型，這通過使用 標籤來實現：

geometry="

primitive: torus;

radius: 1;

radiusTubular: 0.1;

segmentsTubular: 12;"

rotation="10 0 0"

position="-3 1 0">

這裡的實體其幾何模型基於一個麻花原型（torus primitive），其他的一些參數用來定製該模型的外形：torus的外邊界半徑、管道半徑和管道分段數，位置和角度的設置和前述的立方體類似。

定義材料

現在我們已經在場景中可以看到 torus 模型，但顏色看起來不太好，因為該模型還缺少定義其表面屬性的材質（material ），我們需要創建一個材料來定義實體表面的外觀，修改上述代碼為如下所示：

geometry="

primitive: torus;

radius: 1;

radiusTubular: 0.1;

segmentsTubular: 12;"

material="

color: #EAEFF2;

roughness: 0.1;

metalness: 0.5;"

rotation="10 0 0"

position="-3 1 0">

上述代碼中，我們給 entity 添加了一個新的 material 屬性，並給定了該 material 的顏色（color）、粗糙度（roughness，越粗糙的物體散射越均勻）和金屬性（metalness）。

通過JS來動態創建模型對象

我們當然可以通過JavaScript來添加物體，下面的代碼將動態創建一個圓柱體對象並加入場景中，當然JS代碼需要被放在一個

閱讀更多 新無止競 的文章

關鍵字: Oculus 開發 Firefox