网页端的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实现离我们还远么? - 编程知识库
下一篇：支付宝突破微信封锁唤起支付宝代码
您可能还会对这些文章感兴趣
-
作为小米科技的创始人、董事长和首席执行官，雷军的名字如雷贯耳。上午W3Cschool发布了一篇“刘强东的代码水平如何”(有兴趣的可以点击右上角关注我们)的文章，有网友在下面回复“代码只服雷军”。这个回复吸引了W3Cschool的注...
-
如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，我是考了成考的北京航空航天大学，也马上快...
-
Axure汉化版已经发布，版本号Axure 5.1.0.1699，下面是截图效果 Axure汉化版文件下载地址：Axure汉化补丁 Axure RP pro 5.1.0.1699 下载地址注册用户名：Axure 序列...
-
今天百度推出公共DNS服务，IP地址为180.76.76.76，号称拥有遍布全国的递归出口节点，可以做到更稳定，纯净无劫持等。 DNS在现有整个互联网基础架构中也扮演着流量”调度员”、”指引员”的角色。尽管已经有超过30年历史,DNS仍...
-
BI中文站 6月7日报道 艾默生·斯帕茨(Emerson Spartz)今年28岁，已婚，是Spartz Inc公司的首席执行官。Spartz Inc是一个网站媒体帝国，旗下的30多家网站专门发布有趣、励志和让人感到不可思议的文章和帖子，其分享量非常...
大家正在看
- Windows文件系统结构
- mysql 将字段time按天/月/年分组
- 新安装mysql 第三方工具连接不上问题
- CentOS 安装MySQL 5.1.69
- mysql下怎样运行脚本以运行niuzi.sql为例
- 访问IIS网站需要输入用户名密码(非匿名登录)问题汇总
- mysql出现“Incorrect key file for table”解决办法
- mysql无法启动——cannot allocate the memory for the buffer pool
- 数据库工具sysbench安装教程和性能测试例子
- Mysql 日志删除
- mysql 修改字段类型 删除字段类型
- 修改mysql字符编码出现Job failed to start解决办法
- mysql数据库的备份、导入、导出命令，以及数据的导入、导出
- Why TokuDB hates Transparent HugePages
推荐阅读
全部分类
本月热门
- U盘安装CentOS7遇到：Warning: dracut-initqueue timeout – starting timeout scripts
- iOS 手势滑动解锁功能简析
- Keras学习环境配置-GPU加速版（Ubuntu 16.04 + CUDA8.0 + cuDNN6.0 + Tensorflow)
- 【Ubuntu】Ubuntu16.04安装GTX960M显卡驱动
- Ansible系列(二)：选项和常用模块
- 连接ftp出现 331 Please specify the password 的解决办法
- Ubuntu16.04网络连接正常但是无法使用浏览器上网-浏览器代理设置
- Ubuntu 16.04 安装Python 3.6.1及pip
- Android开发-直播视讯(4)-Ubuntu编译ijkplayer的so文件-基础知识
- linux下连接无线网出现nl80211: Could not configure driver mode nl80211: deinit ifname=wlan1 disabled_11b_rate