徐慧瓊

(山西職業(yè)技術(shù)學(xué)院計算機工程系，山西 太原 030006)

21世紀(jì)以來，全球跨入了信息化技術(shù)時代，計算機技術(shù)的應(yīng)用與發(fā)展進(jìn)入了更高的層次，隨著計算機圖形學(xué)，人機交互技術(shù)，傳感技術(shù)，人工智能等領(lǐng)域的不斷發(fā)展和深入,計算機并不僅僅可以實現(xiàn)對聲音、圖像、圖形、動畫、視頻等的處理，而且可以實現(xiàn)將三維實體、三維環(huán)境等以虛擬現(xiàn)實的形式表現(xiàn)出來，產(chǎn)生交互式的三維動畫、動態(tài)仿真[1]。由此，很多虛擬現(xiàn)實系統(tǒng)相繼出現(xiàn)，主要涉及的領(lǐng)域有電影、游戲、教育、軍事、醫(yī)療等。但是在虛擬現(xiàn)實硬件快速發(fā)展的同時，其創(chuàng)作內(nèi)容卻相對滯后，創(chuàng)作成本相當(dāng)昂貴，所以到目前為止并沒有得到真正的普及。

WebVR是Web技術(shù)在VR領(lǐng)域的應(yīng)用，是一種在瀏覽器中創(chuàng)建虛擬現(xiàn)實3D體驗的JavaScript應(yīng)用程序接口。A-Frame框架技術(shù)是WebVR的成員之一，具有一定的代表性。

1 A-Frame框架技術(shù)綜述

A-Frame是 Mozilla 基金會開源的網(wǎng)頁虛擬現(xiàn)實體驗(WebVR)框架，是一個方便、強大的開發(fā)庫工具，它定位于Web開發(fā)，構(gòu)建于WebGL接口之上，內(nèi)置了Three.js的開發(fā)框架。通過這個工具，Web開發(fā)者不需要編寫太多的JavaScript和GLSL語句，只使用熟悉的HTML標(biāo)記語言就可以快速構(gòu)建3D VR場景，最終實現(xiàn)在網(wǎng)頁中獲得3D虛擬現(xiàn)實體驗的設(shè)計目標(biāo)。

在國外，A-Frame框架技術(shù)也有著較為廣泛的使用，包括華盛頓郵報、谷歌創(chuàng)新實驗室、國際特赦組織等都是A-Frame框架技術(shù)的用戶。

1.1 支持A-Frame框架技術(shù)的瀏覽器

A-Frame支持所有實現(xiàn)了WebGL接口的現(xiàn)代瀏覽器。如：Firefox、chrome、百度VR瀏覽器、Safari等。

1.2 支持A-Frame框架技術(shù)的硬件設(shè)備

A-Frame最大的一個優(yōu)勢在于其具備跨平臺性,支持PC端、Mobile端以及頭戴設(shè)備Oculus Rift和HTC Vive[2]。

2 A-Frame框架技術(shù)在虛擬室內(nèi)裝修效果展示網(wǎng)頁設(shè)計中的應(yīng)用

2.1 設(shè)計目標(biāo)

使用A-Frame技術(shù)，創(chuàng)建虛擬現(xiàn)實室內(nèi)裝修效果展示網(wǎng)頁，并實現(xiàn)不同裝修效果的切換。

2.2 操作環(huán)境

硬件配置：普通電腦一臺，虛擬現(xiàn)實頭顯設(shè)備(不帶手持控制器)一套。

軟件配置：windows 7操作系統(tǒng)，DreamWeaver CS 5，F(xiàn)irefox瀏覽器，Apache服務(wù)器，0.8.0版本的A-frame庫文件aframe.min.js,以及其布局組件文件aframe-layout-component.min.js、事件組件文件aframe-event-set-component.min.js、模板組件文件aframe-template-component.min.js組件文件。素材：360度全景裝修效果設(shè)計圖，導(dǎo)航按鈕圖片。

2.3 詳細(xì)設(shè)計與制作

2.3.1 創(chuàng)建網(wǎng)頁文件結(jié)構(gòu)

創(chuàng)建如圖1所示的文件結(jié)構(gòu)。360images文件夾存放頁面設(shè)計用到的所有圖像素材；component文件夾里存放頁面設(shè)計中用到的所有庫文件和組件文件。

在DreamWeaver CS 5中打開index.html網(wǎng)頁，在