网页端的VR如何实现?

视界君-阿琳 2016-10-25 16:32:41

视界君预测不远的未来,基于web页面的VR实现将会进入我们的视野。因为越来越多的开源组织和机构都在开始支持基于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场景的浏览器也都可以方便的运行相关应用。

网页端的VR如何实现?


开发第一个基于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>

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

运行调试代码

视界君总结
没有太多编程基础的朋友,或者对于太底层的3D编程类库不熟悉的朋友,可以快速使用aframe生成简单的web VR效果,相信能够在某些简单场景中,实现自己需要的虚拟现实功能。

99VR视界二维码
热门推荐
Hot Recommended
在线客服