5G时代即未来临，VR虚拟现实技术会获得更大发展，WebVR将逐渐走入大众视野！
web端的虚拟现实（webVR）
WebVR和WebGL应用程序接口使得咱们已经能够在浏览器上建立虚拟现实（VR）体验，但从工程化的角度而言，开发社区还须要更多方便强大的开发库来简化编程，Mozilla的 A-Frame 框架就是这样一个工具，提供了一个Web开发者所熟悉的标记语言来快速构建3D VR场景动画原型，而不须要编写过多的JavaScript和GLSL语句。本文将介绍如何使用A-Frame构建一个简单的在线可运行实例。
有了A-frame，咱们就能够用相似dom的形式来建立3D建模和VR界面了。
概览
当前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虚拟现实体验的设计目标。
开发环境javascript
- 首先要有一个现代浏览器，支持WebGL和WebVR，好比最新版本的Firefox（Firefox Nightly）或Chrome（v54+）。
- （可选）设置一个VR设备如Oculus Rift、HTC Vive或者 Google Cardboard。
- 能够到这里下载
HTML代码结构
效果以下：（就右下角一个VR图标）
初始化场景
场景（scene）是全部VR内容的容器，当建立新的对象后，咱们只有把这些对象加到场景中，才能真正在屏幕上被看到。在 A-Frame 中，场景经过一个 场景实体（Scene entity）元素来表达。
注意：一个实体（Entity）能够是任意元素 - 能够是盒子、圆柱、圆锥对象，也能够是一个相机（camera）、光源（light）或者声源（sound）。
咱们经过在 元素中添加一个 元素来添加场景对象，即在踏得网在线开发平台的html面板中添加以下代码。
一个天空盒（skybox）是三维世界的背景，经过一个 元素来表示。在这里，咱们使用一个简单的颜色背景，但它也能够是一个图像（image）等。环顾四周的时候能够营造一种在天空中或者木质车库或者任何你喜欢的环境中的感受。添加以下的标记代码在 元素以前：
这里选第4张图下载下来
此时就能生成可操做的全景效果了
效果如视频
视频得去公众号看啦~这里不能放进来
添加一个几何模型
接着咱们在 元素中添加一个 元素，这等因而在场景中添加一个立方体：
到这里，若是你点击菜单中的“运行”按钮（或者按CTRL+R快捷键），咱们将看到一个带背景的立方体，而且能够经过鼠标（若是是经过电脑屏幕查阅该做品）操控它：
咱们很容易就完成了一个VR小应用，这是由于 A-Frame 帮咱们作了不少事情：
该应用程序包含了一个缺省的光源和相机，因此咱们能看到场景中的模型。
有现成可用的操做控制器：能够360°浏览，能够经过键盘上的WASD按键来行走。
屏幕右下角还有一个"Enter VR mode"按钮（眼镜形状的图标），能够切换到全屏模式，若是你设置好了VR设备，那么将能够进入虚拟现实模式。
指定一个相机
相机经过 元素来添加到场景中。咱们能够显式设置相机的位置，把相机放在场景中心稍退后一点的位置上，这样咱们能看清模型形状，咱们把该元素添加在场景元素的关闭标签 以前：
上述代码中，咱们还经过 cursor-* 属性给相机定义了游标（cursor，缺省状况下不可见）- 咱们设置了游标的缩放因子（scale），这样就更容易被看见，透明度设置为0.5，这样不会彻底挡住游标后面的物体。
添加光源
A-Frame中的基础光源类型是平行光（directional light）和环境光（ambient light）。平行光被放在场景某处而环境光是来自该平行光的反射，这样光线看起来比较天然。光源元素的标签为 ，把下面的代码添加到前述相机元素以后：
这样咱们添加了一个白色平行光，光强为0.5，位置在 (-1, 1, 2) 。
添加高级模型
前面咱们经过 添加过立方体，可是A-Frame并不局限于只能添加固定模型，还能够添加自定义的复杂形状模型，这经过使用 标签来实现：
这里的实体其几何模型基于一个麻花原型（torus primitive），其余的一些参数用来定制该模型的外形：torus的外边界半径、管道半径和管道分段数，位置和角度的设置和前述的立方体相似。
定义材料
如今咱们已经在场景中能够看到 torus 模型，但颜色看起来不太好，由于该模型还缺乏定义其表面属性的材质（material ），咱们须要建立一个材料来定义实体表面的外观，修改上述代码为以下所示：
上述代码中，咱们给 entity 添加了一个新的 material 属性，并给定了该 material 的颜色（color）、粗糙度（roughness，越粗糙的物体散射越均匀）和金属性（metalness）。
经过JS来动态建立模型对象
咱们固然能够经过JavaScript来添加物体，下面的代码将动态建立一个圆柱体对象并加入场景中，固然JS代码须要被放在一个html