网页端的VR实现离我们还远么?
不管你信或者不信,基于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>
以上代码添加了一个地面及其一格圆锤体,分别定义了颜色,位置,及其高度等等属性
手机端请扫以下二维码查看效果
小编总结
没有太多编程基础的朋友,或者对于太底层的3D编程类库不熟悉的朋友,可以快速使用aframe生成简单的web VR效果,相信能够在某些简单场景中,实现自己需要的虚拟现实功能,绝对是一个利器~,大家尝试一下吧~
转载请注明:网页端的VR实现离我们还远么? - 编程知识库
下一篇:2017 年十大网页设计趋势
您可能还会对这些文章感兴趣
2016-12-23 453次网页端的VR实现离我们还远么?
不管你信或者不信,基于web页面的虚拟现实将会慢慢进入我们的视野~,越来越多的开源组织和机构都在开始支持基于web的VR实现,包括mozilla,也推出了基于webVR的许多解决方案~ 今天介绍的框架aframe便是众多webVR解决方案中最简单的开发框架,这个框架基于javascript...
2016-12-23 112次Java WeakReference的理解与使用
前言: 看到篇帖子, 国外一个技术面试官在面试senior java developer的时候, 问到一个weak reference相关的问题. 他没有期望有人能够完整解释清楚weak reference是什么, 怎么用, 只是期望有人能够提到这个concept和java的GC相关. 很可惜的是, 20多个拥有5年以上java开...
2016-12-23 869次搞清楚 Python traceback
上周公司组织Python方面的代码review,其中提到一个问题就是没有一个统一的异常日志分析机制,都乱七八糟的,然后回头看了一下自己项目的异常处理方面,感觉对Python异常体系以及相关的工具模块了解不是很深。有必要整理一下关于Python异常处理方面的一些基础知识。 ...
2016-12-23 185次Referrer 还是 Referer?
上回我写了一篇文章介绍「Referrer Policy」,有小伙伴看完后问我:Referrer 这个单词到底怎么拼,为什么有时候中间有两个 r ,有时候只有一个? 是的,这是一个很有趣的问题,这里就给有疑惑的同学们科普下。 HTTP 中的 Referrer HTTP 协议中有一个用来表示页面或资...
大家正在看
- 二类电商是什么意思? 二类电商有哪些?暴利二类电商还好做吗?
- 【二类电商广点通投放指南】二类电商广点通投放值不值
- 密码保护:支付宝突破微信封锁唤起支付宝代码
- Host is not allowed to connect to this MySQL server解决方法
- 密码保护:移动端js自动复制代码
- linux数据库调优,WordPress MySQL占用cpu高数据库优化
- 2017 年十大网页设计趋势
- 网页端的VR实现离我们还远么?
- 最完整的Chrome浏览器客户端调试大全
- iPhone用户人均每天遭电话骚扰1次
- 3G电子化销售服务系统
- Java WeakReference的理解与使用
- 搞清楚 Python traceback
- Referrer 还是 Referer?