网页端的VR实现离我们还远么?

时间：2016-12-23 分类：技术阅读：533次

不管你信或者不信，基于web页面的虚拟现实将会慢慢进入我们的视野~，越来越多的开源组织和机构都在开始支持基于web的VR实现，包括mozilla，也推出了基于webVR的许多解决方案~

今天介绍的框架aframe便是众多webVR解决方案中最简单的开发框架，这个框架基于javascript的3D类库three.js和webGL实现，完全使用类似开发HTML的语法来开发~

提示：浏览器兼容性这里要求支持WebGL，所以相关chrome，firefox，Opera和Edge等支持webGL的现代浏览器都可以方便的运行aframe开发的web VR应用，其它VR设备例如， oculus rifts等支持web场景的浏览器也都可以方便的运行相关应用

开发第一个基于Web的VR应用

步骤一：引用类库，定义基础场景

使用aframe非常简单，有两种方式：

传统的javascript类库方式
npm包安装

这里我们使用传统方式做一个演示，以下是框架代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Web VR App</title>
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      
    </a-scene>
  </body>
</html>

以上代码我们首先引用了aframe的javascript类库

定义了一个基础标签a-scene，其它应用的代码都需要书写到a-scene中，它定义了顶级父标签

步骤二：引用类库，定义基础场景

定义场景的天空颜色，如下：

<a-scene>
  <a-sky color="#202020"></a-sky>
</a-scene>

以上定义了VR场景的天空，当然，如下使用一张360度全景图片来展示，可能大家看的更加明显和直观

修改以上代码如下：

<a-scene>
 <a-sky src="/gb/networks/uploadimg/e4ba3350-623e-41ff-a546-aae11592d9f6.jpg" rotation="0 -130 0"></a-sky>
</a-scene>

步骤三：运行HTML代码

运行调试代码

手机端请扫以下二维码查看效果

步骤四：添加一些自定义的元素到场景中

添加如下代码到相关场景里：

  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

以上代码添加了一个地面及其一格圆锤体，分别定义了颜色，位置，及其高度等等属性