不管你信或者不信,基于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场景的浏览器也都可以方便的运行相关应用
使用aframe非常简单,有两种方式:
这里我们使用传统方式做一个演示,以下是框架代码
<!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>
添加如下代码到相关场景里:
<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效果,相信能够在某些简单场景中,实现自己需要的虚拟现实功能,绝对是一个利器~,大家尝试一下吧~
下一篇:2017 年十大网页设计趋势
编程知识库是国内专业的网站建设资源编程技术学习类网站