王學璠 田元 周冪 夏丹

摘 要： 虛擬現(xiàn)實技術和移動互聯(lián)網(wǎng)技術的迅速發(fā)展改變了人們的生活方式，但也存在開發(fā)難等問題。文章介紹了能夠快速簡單地構建虛擬場景并創(chuàng)建虛擬交互的A-Frame框架，并通過一個案例的開發(fā)過程分析了利用A-Frame構建虛擬現(xiàn)實應用的基本步驟。

關鍵詞： 虛擬現(xiàn)實； 虛擬交互； WebVR； A-Frame

中圖分類號：TP393 文獻標志碼：A 文章編號：1006-8228（2018）03-20-03

A-Frame based virtual reality applications

Wang Xuefan， Tian Yuan， Zhou Mi， Xia Dan

（School of Educational Information Technology， Central China Normal University， Wuhan， Hubei 430079， China）

Abstract： The rapid development of virtual reality technology and mobile Internet technology has changed people's life， but there are also some problems such as difficulty in development and so on. To solve these problems， A-Frame framework was proposed， which can quickly and simply build virtual scene and create virtual interaction. The basic steps to construct virtual reality scenes are analyzed through a case of development process.

Key words： virtual reality； virtual interaction； WebVR； A-Frame

0 引言

虛擬現(xiàn)實（Augmented Reality，簡稱VR）是由計算機等設備模擬接近真實的虛擬場景，讓用戶在視覺聽覺等感官上仿佛置身于真實世界[1-3]。虛擬現(xiàn)實系統(tǒng)強大的沉浸感，交互性和想象力使得VR技術前景廣闊，發(fā)展迅速[4-6]。但是隨之而來產(chǎn)生了諸多問題，比如VR內(nèi)容不豐富、設備成本高、開發(fā)困難等，這些問題限制了VR技術的大眾化[7]。而WebVR的出現(xiàn)讓大眾在瀏覽器上能輕松體驗VR并進行分享，并且無需安裝插件[8-10]，如Beloola就是一個基于WebVR的社交平臺，允許人們在同一個虛擬的空間上實時進行情感交流。所以WebVR成為虛擬現(xiàn)實行業(yè)中一顆明亮的新星。

然而開發(fā)WebVR程序不是一件簡單的事情，如果從WebGL等底層代碼寫起，很是費時費力。而A-Frame是一個基于WebVR的框架，使開發(fā)者事半功倍。華盛頓郵報、國際特赦組織、谷歌創(chuàng)新實驗室等都是A-Frame的用戶。雖然VR技術還在發(fā)展階段，但效果已經(jīng)非?？犰?，在未來互聯(lián)網(wǎng)時代將呈現(xiàn)更大的價值。

1 A-FRAME的優(yōu)勢與特點

A-Frame是一個通過HTML創(chuàng)建虛擬現(xiàn)實體驗的開源WebVR框架，可以方便快捷的創(chuàng)建虛擬場景中的模型對象并進行編輯、指定材質(zhì)、設置燈光和攝像機、編輯動畫和虛擬交互等，并且可以快速創(chuàng)建VR視口。A-Frame可以用來開發(fā)虛擬現(xiàn)實、增強現(xiàn)實等應用，輕松讓用戶猶如置身于奇幻之境。A-Frame開發(fā)簡單、容易上手。對于熟悉WebVR或前端開發(fā)的研究者，能夠快速通過超文本標記語言進行開發(fā)。對于從事三維建模的研究者或藝術家也可以快速創(chuàng)建交互場景。A-Frame的許多優(yōu)良特性使這個框架易學易用。

1.1 跨平臺使用

A-Frame不僅能在臺式電腦和筆記本上使用，還可以在手機和平板電腦上運行，同時還支持許多虛擬現(xiàn)實輸出設備， 如移動端頭顯暴風魔鏡和小宅Z5等，又如VR頭盔HTC Vive和OCulus Rift等。不同消費水平的用戶可以在不同的設備上隨時隨地享受VR體驗。

1.2 可視化編輯界面和資源管理器

A-Frame不僅能在臺式電腦和筆記本上使用，還可以在手機和平板電腦上運行，同時還支持許多虛擬現(xiàn)實輸出設備， 如移動端頭顯暴風魔鏡和小宅Z5等、VR頭盔HTC Vive和OCulus Rift等。不同消費水平的用戶可以在不同的設備上隨時隨地享受VR體驗。

圖1 可視化編輯器

1.3 操作便捷，訪問輕松

A-Frame是基于HTML的框架，具有簡易性、可擴展性、可移植性以及平臺無關性。代碼清晰易懂，用標簽就能自動生成三維場景。A-Frame 和大多數(shù)開發(fā)WEB的庫、框架和工具如React、Preact、Vue.js， Angular、d3.js、Ember.js和jQuery等兼容。熟悉WebGL各種類庫或者計算機圖形學的研究者能夠更輕松的在A-Frame中創(chuàng)建三維物體和動畫。開發(fā)者可以選擇GitHub托管自己的代碼，用GitHub帳號登錄A-Frame即可進行在線開發(fā)、作品發(fā)布以及作品瀏覽和分享等操作。用戶可以在瀏覽器上輕松地訪問開發(fā)者的作品。

1.4 實體-組件-系統(tǒng)結構

A-Frame使用了實體-組件-系統(tǒng)架構，更易于構造VR場景。每一個實體都是一個對象，比如場景中的一個三維物體就是一個實體。一般來說，通過繼承的方法構建實體容易出現(xiàn)類爆炸的問題，通過組合的方法構建實體很好的解決了這個問題。所以，實體就是多個組件的聚合，這種方式容易構建新的、更復雜的實體對象。

A-Frame提供了許多核心組件，如幾何形狀、模型、文本、海洋、山脈、材質(zhì)、光照、陰影、動畫、物理系統(tǒng)、粒子系統(tǒng)等。每個組件都可以設置屬性值，通過改變組件屬性和混合組件來定義實體的外觀、行為和功能。系統(tǒng)對所有相關聯(lián)的組件進行操作，為組件類提供管理和服務。在A-Frame中，系統(tǒng)就是整個場景，可以由許多實體組成。

2 A-FRAME的的實現(xiàn)過程和應用

2.1 開發(fā)概述

在A-Frame項目中，三維虛擬場景默認攝像機的方向以x、y、z正交方式存在。以用戶面對屏幕為標準，向左為x軸正方向，向上為y軸正方向，出屏幕方向為z軸正方向。每個實體有自身坐標系，在可視化編輯界面中選擇實體就能看到疊加在該實體上的三條坐標軸，紅色代表x軸，綠色代表y軸，藍色代表z軸。該坐標軸指出了當前實體的坐標定向和變換中心，高亮的軸表示變換操作在該方向受到約束。

A-Frame的距離單位是米，旋轉單位是角度，在此基礎上對物體進行平移縮放和旋轉等操作，并且支持父子變換，即子代繼承父代的變換，如在HTML中用標簽

代表一個父實體有兩個子實體。

通過HTML構建A-Frame項目，首先需要在head中引用所需的腳本文件，比如：

接下來就可以在body中添加場景，在scene中添加實體。開發(fā)者可以把在虛擬場景中感受到的物體當做實體，比如攝像機、燈光、盒子等實體，分別用標簽表示。為每個物體添加形狀、材質(zhì)、光照、動畫等組件，設置屬性和屬性值，用標簽表示。此外，因為A-Frame本質(zhì)上就是HTML，因此，可以像普通Web開發(fā)一樣使用JavaScript和 DOM API來控制其中的場景和實體。登錄A-Frame社區(qū)可以查看使用指南和模型案例。

2.2 構建一個簡單的室內(nèi)場景

在建模軟件中進行室內(nèi)設計通常要經(jīng)過建模、賦材質(zhì)、打光、做動畫效果等步驟，在A-Frame中構建場景也類似。拿到設計圖紙之后，首先要用一些幾何形狀實體拼合成為基本的物體，如桌子，凳子、柜子等。A-Frame提供的幾何形狀有立方體、球、圓柱、圓環(huán)以及平面、圓片、三角面等。在可視化編輯器中或HTML中可以設置其形狀和材質(zhì)組件的屬性，如位置大小、反面可見以及透明度等。如可以通過以下代碼指定一個平面，設置位置大小等信息，構建一個窗簾實體：

。

圖2中，茶幾是用若干形狀不同的立方體拼合而成，通常情況下，開發(fā)者會把同物體中的實體作為子代，這樣，可以通過變換父實體來控制整個物體，效果如同3DsMAX中的成組。此外還允許導入資源管理器中的模型，可以上傳并使用的模型格式有：glTF、OBJ、COLLADA等，這使建模更快捷精準，效果更美觀。最終的模型效果如圖2所示。

圖2 模型效果圖

建模完成之后，通過材質(zhì)組件來給實體添加貼圖和紋理來控制實體的顏色和質(zhì)感，使場景更加逼真、舒適美觀。材質(zhì)組件常用的屬性有顏色、貼圖和法線貼圖。顏色屬性color的值為十六進制顏色碼，分別對應RGB三通道的值，其作用是控制實體的表面顏色。貼圖屬性src的值為圖片的URL，開發(fā)者把需要的圖片上傳到資源管理器后，可復制其地址信息，使用并設置貼圖的重復次數(shù)，使圖片猶如貼在物體表面一樣。貼圖及其顏色的效果會疊加顯示，比如選取咖啡色的顏色值和貼木紋圖案的顯示效果要比只貼木紋圖案視覺上顏色更深一些。法線貼圖normalMap的使用和貼圖相似，作用是控制實體的紋理效果，也就是視覺上的凹凸感，使得效果更逼真。如下代碼是在上述窗簾的基礎上設置了顏色、材質(zhì)貼圖等信息：

height="4" rotation="0 -104.82 0" color=

"#7BC8A4"geometry="height：5.66；width：0.8"

material="color：#ffffff；normalMap：https：//cdn.glitch.com/

5.jpg？5；src：https：//cdn.glitch.com/2.jpg？ 7">

打光使整個場景鮮活起來。在HTML中通過添加標簽來添加燈光。給燈光實體添加光照組件，屬性有光源類型、顏色、強度、衰減等。光源類型有全局光、半球光、點光、光斑。顏色為光線的顏色，和強度衰減值等共同控制光照效果，不同的光源類型還有不同的屬性。遵循三點布光法就可以實現(xiàn)簡單的室內(nèi)照明效果。主光源為較強的方向光，順光用來照亮室內(nèi)產(chǎn)生物體陰影，輔助光為強度較小的方向光，測光使主光不能照的陰影區(qū)域柔和，背景光為強度較小的全局光，定義室內(nèi)整體色彩基調(diào)，增加墻體等背景的亮度從而襯托室內(nèi)家具。如下代碼創(chuàng)建了一個具有位置、強度等信息的全局光線：

[1]2[3]存入我的閱覽室

ambient；castShadow：true">