网页端的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 526次网页端的VR实现离我们还远么?
不管你信或者不信，基于web页面的虚拟现实将会慢慢进入我们的视野~，越来越多的开源组织和机构都在开始支持基于web的VR实现，包括mozilla，也推出了基于webVR的许多解决方案~ 今天介绍的框架aframe便是众多webVR解决方案中最简单的开发框架，这个框架基于javascript...
2016-12-23 182次Java WeakReference的理解与使用
前言: 看到篇帖子, 国外一个技术面试官在面试senior java developer的时候, 问到一个weak reference相关的问题. 他没有期望有人能够完整解释清楚weak reference是什么, 怎么用, 只是期望有人能够提到这个concept和java的GC相关. 很可惜的是, 20多个拥有5年以上java开...
2016-12-23 1,063次搞清楚 Python traceback
上周公司组织Python方面的代码review，其中提到一个问题就是没有一个统一的异常日志分析机制，都乱七八糟的，然后回头看了一下自己项目的异常处理方面，感觉对Python异常体系以及相关的工具模块了解不是很深。有必要整理一下关于Python异常处理方面的一些基础知识。 ...
2016-12-23 265次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？