基于A—Frame的虚拟现实应用

王学璠 田元 周幂 夏丹

摘 要： 虚拟现实技术和移动互联网技术的迅速发展改变了人们的生活方式，但也存在开发难等问题。文章介绍了能够快速简单地构建虚拟场景并创建虚拟交互的A-Frame框架，并通过一个案例的开发过程分析了利用A-Frame构建虚拟现实应用的基本步骤。

关键词： 虚拟现实； 虚拟交互； 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 引言

虚拟现实（Augmented Reality，简称VR）是由计算机等设备模拟接近真实的虚拟场景，让用户在视觉听觉等感官上仿佛置身于真实世界[1-3]。虚拟现实系统强大的沉浸感，交互性和想象力使得VR技术前景广阔，发展迅速[4-6]。但是随之而来产生了诸多问题，比如VR内容不丰富、设备成本高、开发困难等，这些问题限制了VR技术的大众化[7]。而WebVR的出现让大众在浏览器上能轻松体验VR并进行分享，并且无需安装插件[8-10]，如Beloola就是一个基于WebVR的社交平台，允许人们在同一个虚拟的空间上实时进行情感交流。所以WebVR成为虚拟现实行业中一颗明亮的新星。

然而开发WebVR程序不是一件简单的事情，如果从WebGL等底层代码写起，很是费时费力。而A-Frame是一个基于WebVR的框架，使开发者事半功倍。华盛顿邮报、国际特赦组织、谷歌创新实验室等都是A-Frame的用户。虽然VR技术还在发展阶段，但效果已经非常酷炫，在未来互联网时代将呈现更大的价值。

1 A-FRAME的优势与特点

A-Frame是一个通过HTML创建虚拟现实体验的开源WebVR框架，可以方便快捷的创建虚拟场景中的模型对象并进行编辑、指定材质、设置灯光和攝像机、编辑动画和虚拟交互等，并且可以快速创建VR视口。A-Frame可以用来开发虚拟现实、增强现实等应用，轻松让用户犹如置身于奇幻之境。A-Frame开发简单、容易上手。对于熟悉WebVR或前端开发的研究者，能够快速通过超文本标记语言进行开发。对于从事三维建模的研究者或艺术家也可以快速创建交互场景。A-Frame的许多优良特性使这个框架易学易用。

1.1 跨平台使用

A-Frame不仅能在台式电脑和笔记本上使用，还可以在手机和平板电脑上运行，同时还支持许多虚拟现实输出设备， 如移动端头显暴风魔镜和小宅Z5等，又如VR头盔HTC Vive和OCulus Rift等。不同消费水平的用户可以在不同的设备上随时随地享受VR体验。

1.2 可视化编辑界面和资源管理器

A-Frame不仅能在台式电脑和笔记本上使用，还可以在手机和平板电脑上运行，同时还支持许多虚拟现实输出设备， 如移动端头显暴风魔镜和小宅Z5等、VR头盔HTC Vive和OCulus Rift等。不同消费水平的用户可以在不同的设备上随时随地享受VR体验。

图1 可视化编辑器

1.3 操作便捷，访问轻松

A-Frame是基于HTML的框架，具有简易性、可扩展性、可移植性以及平台无关性。代码清晰易懂，用标签就能自动生成三维场景。A-Frame 和大多数开发WEB的库、框架和工具如React、Preact、Vue.js， Angular、d3.js、Ember.js和jQuery等兼容。熟悉WebGL各种类库或者计算机图形学的研究者能够更轻松的在A-Frame中创建三维物体和动画。开发者可以选择GitHub托管自己的代码，用GitHub帐号登录A-Frame即可进行在线开发、作品发布以及作品浏览和分享等操作。用户可以在浏览器上轻松地访问开发者的作品。

1.4 实体-组件-系统结构

A-Frame使用了实体-组件-系统架构，更易于构造VR场景。每一个实体都是一个对象，比如场景中的一个三维物体就是一个实体。一般来说，通过继承的方法构建实体容易出现类爆炸的问题，通过组合的方法构建实体很好的解决了这个问题。所以，实体就是多个组件的聚合，这种方式容易构建新的、更复杂的实体对象。

A-Frame提供了许多核心组件，如几何形状、模型、文本、海洋、山脉、材质、光照、阴影、动画、物理系统、粒子系统等。每个组件都可以设置属性值，通过改变组件属性和混合组件来定义实体的外观、行为和功能。系统对所有相关联的组件进行操作，为组件类提供管理和服务。在A-Frame中，系统就是整个场景，可以由许多实体组成。

2 A-FRAME的的实现过程和应用

2.1 开发概述

在A-Frame项目中，三维虚拟场景默认摄像机的方向以x、y、z正交方式存在。以用户面对屏幕为标准，向左为x轴正方向，向上为y轴正方向，出屏幕方向为z轴正方向。每个实体有自身坐标系，在可视化编辑界面中选择实体就能看到叠加在该实体上的三条坐标轴，红色代表x轴，绿色代表y轴，蓝色代表z轴。该坐标轴指出了当前实体的坐标定向和变换中心，高亮的轴表示变换操作在该方向受到约束。

A-Frame的距离单位是米，旋转单位是角度，在此基础上对物体进行平移缩放和旋转等操作，并且支持父子变换，即子代继承父代的变换，如在HTML中用标签

代表一个父实体有两个子实体。

通过HTML构建A-Frame项目，首先需要在head中引用所需的脚本文件，比如：

接下来就可以在body中添加场景，在scene中添加实体。开发者可以把在虚拟场景中感受到的物体当做实体，比如摄像机、灯光、盒子等实体，分别用标签表示。为每个物体添加形状、材质、光照、动画等组件，设置属性和属性值，用标签表示。此外，因为A-Frame本质上就是HTML，因此，可以像普通Web开发一样使用JavaScript和 DOM API来控制其中的场景和实体。登录A-Frame社区可以查看使用指南和模型案例。

2.2 构建一个简单的室内场景

在建模软件中进行室内设计通常要经过建模、赋材质、打光、做动画效果等步骤，在A-Frame中构建场景也类似。拿到设计图纸之后，首先要用一些几何形状实体拼合成为基本的物体，如桌子，凳子、柜子等。A-Frame提供的几何形状有立方体、球、圆柱、圆环以及平面、圆片、三角面等。在可视化编辑器中或HTML中可以设置其形状和材质组件的属性，如位置大小、反面可见以及透明度等。如可以通过以下代码指定一个平面，设置位置大小等信息，构建一个窗帘实体：

。

图2中，茶几是用若干形状不同的立方体拼合而成，通常情况下，开发者会把同物体中的实体作为子代，这样，可以通过变换父实体来控制整个物体，效果如同3DsMAX中的成组。此外还允许导入资源管理器中的模型，可以上传并使用的模型格式有：glTF、OBJ、COLLADA等，这使建模更快捷精准，效果更美观。最终的模型效果如图2所示。

图2 模型效果图

建模完成之后，通过材质组件来给实体添加贴图和纹理来控制实体的颜色和质感，使场景更加逼真、舒适美观。材质组件常用的属性有颜色、贴图和法线贴图。颜色属性color的值为十六进制颜色码，分别对应RGB三通道的值，其作用是控制实体的表面颜色。贴图属性src的值为图片的URL，开发者把需要的图片上传到资源管理器后，可复制其地址信息，使用并设置贴图的重复次数，使图片犹如贴在物体表面一样。贴图及其颜色的效果会叠加显示，比如选取咖啡色的颜色值和贴木纹图案的显示效果要比只贴木纹图案视觉上颜色更深一些。法线贴图normalMap的使用和贴图相似，作用是控制实体的纹理效果，也就是视觉上的凹凸感，使得效果更逼真。如下代码是在上述窗帘的基础上设置了颜色、材质贴图等信息：

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中通过添加标签来添加灯光。给灯光实体添加光照组件，属性有光源类型、颜色、强度、衰减等。光源类型有全局光、半球光、点光、光斑。颜色为光线的颜色，和强度衰减值等共同控制光照效果，不同的光源类型还有不同的属性。遵循三点布光法就可以实现简单的室内照明效果。主光源为较强的方向光，顺光用来照亮室内产生物体阴影，辅助光为强度较小的方向光，测光使主光不能照的阴影区域柔和，背景光为强度较小的全局光，定义室内整体色彩基调，增加墙体等背景的亮度从而衬托室内家具。如下代码创建了一个具有位置、强度等信息的全局光线：

[1]2[3]存入我的阅览室

ambient；castShadow：true">