扣丁学堂浅谈基于网页端的VR如何实现
87357660 2017-12-07
在现如今，随着互联网科技飞速的发展和进步，未来可能基于web页面的VR实现将会进入我们的视野。因为越来越多的开源组织和机构都在开始支持基于web的VR实现，包括mozilla，也推出了基于webVR的许多解决方案。本文介绍的框架aframe便是众多webVR解决方案中最简单的开发框架，这个框架基于javascript的3D类库three.js和webGL实现，完全使用类似开发HTML的语法来开发。
提示：浏览器兼容性这里要求支持WebGL，所以相关chrome，firefox，Opera和Edge等支持webGL的现代浏览器都可以方便的运行aframe开发的webVR应用，其它VR设备例如，oculusrifts等支持web场景的浏览器也都可以方便的运行相关应用。
步骤一：引用类库，定义基础场景
使用aframe非常简单，有两种方式：
传统的javascript类库方式
npm包安装
这里我们使用传统方式做一个演示，以下是框架代码
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>WebVRApp</title>
<scriptsrc="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-skycolor="#202020"></a-sky>
</a-scene>
以上定义了VR场景的天空，当然，如下使用一张360度全景图片来展示，可能大家看的更加明显和直观
修改以上代码如下：
<a-scene>
<a-skysrc="/gb/networks/uploadimg/e4ba3350-623e-41ff-a546-aae11592d9f6.jpg"rotation="0-1300"></a-sky>
</a-scene>
步骤三：运行HTML代码
运行调试代码
步骤四：添加一些自定义的元素到场景中
添加如下代码到相关场景里：
<a-cylinderposition="10.751"radius="0.5"height="1.5"color="#FFC65D"></a-cylinder>
<a-planerotation="-9000"width="4"height="4"color="#7BC8A4"></a-plane>
以上代码添加了一个地面及其一格圆锤体，分别定义了颜色，位置，及其高度等等属性及运行调试代码，最后对于太底层的3D编程类库不熟悉的朋友，可以快速使用aframe生成简单的webVR效果，相信能够在某些简单场景中，实现自己需要的虚拟现实功能，想要了解更多请关注扣丁学堂官网、微信等平台，扣丁学堂IT职业在线VR培训学习教育平台为您提供权威的VR视频教程系统，通过扣丁学堂金牌讲师在线录制的第一套自适VR在线视频课程系统，让你快速掌握VR从入门到精通实战技能。
