基于A-Frame的虚拟现实室内装修效果展示网页的设计与实现

徐慧琼

(山西职业技术学院计算机工程系，山西 太原 030006)

21世纪以来，全球跨入了信息化技术时代，计算机技术的应用与发展进入了更高的层次，随着计算机图形学，人机交互技术，传感技术，人工智能等领域的不断发展和深入,计算机并不仅仅可以实现对声音、图像、图形、动画、视频等的处理，而且可以实现将三维实体、三维环境等以虚拟现实的形式表现出来，产生交互式的三维动画、动态仿真[1]。由此，很多虚拟现实系统相继出现，主要涉及的领域有电影、游戏、教育、军事、医疗等。但是在虚拟现实硬件快速发展的同时，其创作内容却相对滞后，创作成本相当昂贵，所以到目前为止并没有得到真正的普及。

WebVR是Web技术在VR领域的应用，是一种在浏览器中创建虚拟现实3D体验的JavaScript应用程序接口。A-Frame框架技术是WebVR的成员之一，具有一定的代表性。

1 A-Frame框架技术综述

A-Frame是 Mozilla 基金会开源的网页虚拟现实体验(WebVR)框架，是一个方便、强大的开发库工具，它定位于Web开发，构建于WebGL接口之上，内置了Three.js的开发框架。通过这个工具，Web开发者不需要编写太多的JavaScript和GLSL语句，只使用熟悉的HTML标记语言就可以快速构建3D VR场景，最终实现在网页中获得3D虚拟现实体验的设计目标。

在国外，A-Frame框架技术也有着较为广泛的使用，包括华盛顿邮报、谷歌创新实验室、国际特赦组织等都是A-Frame框架技术的用户。

1.1 支持A-Frame框架技术的浏览器

A-Frame支持所有实现了WebGL接口的现代浏览器。如：Firefox、chrome、百度VR浏览器、Safari等。

1.2 支持A-Frame框架技术的硬件设备

A-Frame最大的一个优势在于其具备跨平台性,支持PC端、Mobile端以及头戴设备Oculus Rift和HTC Vive[2]。

2 A-Frame框架技术在虚拟室内装修效果展示网页设计中的应用

2.1 设计目标

使用A-Frame技术，创建虚拟现实室内装修效果展示网页，并实现不同装修效果的切换。

2.2 操作环境

硬件配置：普通电脑一台，虚拟现实头显设备(不带手持控制器)一套。

软件配置：windows 7操作系统，DreamWeaver CS 5，Firefox浏览器，Apache服务器，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度全景装修效果设计图，导航按钮图片。

2.3 详细设计与制作

2.3.1 创建网页文件结构

创建如图1所示的文件结构。360images文件夹存放页面设计用到的所有图像素材；component文件夹里存放页面设计中用到的所有库文件和组件文件。

在DreamWeaver CS 5中打开index.html网页，在