网页端的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-23Java WeakReference的理解与使用
前言: 看到篇帖子, 国外一个技术面试官在面试senior java developer的时候, 问到一个weak reference相关的问题. 他没有期望有人能够完整解释清楚weak reference是什么, 怎么用, 只...
2016-12-23搞清楚 Python traceback
上周公司组织Python方面的代码review，其中提到一个问题就是没有一个统一的异常日志分析机制，都乱七八糟的，然后回头看了一下自己项目的异常处理方面，感觉对Python异常体系以及...
2016-12-23Referrer 还是 Referer？
上回我写了一篇文章介绍「Referrer Policy」，有小伙伴看完后问我：Referrer 这个单词到底怎么拼，为什么有时候中间有两个 r ，有时候只有一个？ 是的，这是一个很有趣的问题，这...
2016-12-23ATM存取款一体机的结构及原理【ATM机内部结构图和原理】
王焱欣，曾经的从业者，把ATM拆拆装装了n次 ATM分为两种：取款机和存取款一体机。取款机往往都是十多年前的老机型，安全性不高，现在正逐渐被存取款一体机所取代。 大家稍微注意下...
2016-12-23Facebook开源跨平台前端布局引擎Yoga
随着这几年前端技术的崛起，作为前端UI骨架的布局系统也在其中占据了越来越重要的位置。不管是在移动端、桌面端还是Web端，特别是不同设备的屏幕大小和分辨率千变万化，如何构建良...
2016-12-23微信小程序的开发学习建议和入门项目
今天微信小程序有更新了，新增了大量的接口，同时修复了比较多的bugs，增加分享，扫一扫等功能。 微信小程序更新内容 应该说小程序可以开发比较多的功能了，市面上的80-90%的APP...
2016-12-23【junit单元测试】在Eclipse中使用JUnit4进行单元测试
在Eclipse中使用JUnit4进行单元测试 单元测试，JUnit4。 这两个有什么关系呢？这就好比（草）单元测试和（割草机）。用这个JUnit4工具去辅助我们进行测试。其实不理解这个也没关系...
2016-12-23SSM三大框架整合详细教程（Spring+SpringMVC+MyBatis）
使用 SSM （ Spring 、 SpringMVC 和 Mybatis ）已经有三个多月了，项目在技术上已经没有什么难点了，基于现有的技术就可以实现想要的功能，当然肯定有很多可以改进的地方。之前没...
2016-12-23【海量数据处理】十道海量大数据处理面试题教你如何迅速秒杀掉99%的海量数据处理面试题
十道海量大数据处理面试题 1、海量日志数据，提取出某日访问百度次数最多的那个IP。 首先是这一天，并且是访问百度的日志中的IP取出来，逐个写入到一个大文件中。注意到IP是3...
2016-12-23matlab中的zeros函数
创建一个全为零元素的数组 语法 B = zeros(n) B = zeros(m,n) B = zeros([m n]) B = zeros(d1,d2,d3…) B = zeros([d1 d2 d3…]) B = zeros(size(A)) zeros(m, n,…...
猜你喜欢
大家正在看
- 小米论坛被脱裤（数据与官方符合）可能影响小米移动云等敏感信息
- CSS与HTML5响应式图片
- 前端开发工程师需要知道的7种新型的CSS长度单位
- 10个jQuery HTML5图片滑块动画
- 25套矢量网页背景图片免费下载
- CSS实现多行文本溢出显示省略号
- 2016PHP程序员工资待遇和就业前景调查
- Facebook开源跨平台前端布局引擎Yoga
- jQuery弹出窗口
- vps kloxo清除网站日志和日志目录
- 移动端前端框架UI库（Frozen UI、WeUI、SUI Mobile）
- iOS 使用NSObject的分类实现快速切换主题
- nginx502错误,调整php-fpm.conf避免502频繁错误
- jQuery1.7.1 API的整理和总结