网页端的VR实现离我们还远么?

作者：编程知识库发布：2016-12-23 分类：技术阅读：410次

不管你信或者不信，基于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实现离我们还远么? - 编程知识库

该文章由编程知识库发于2016年12月23日发表在技术分类下，你可以至底部留下评论。

原创文章转载请注明: 网页端的VR实现离我们还远么? | 编程知识库

上一篇：最完整的Chrome浏览器客户端调试大全

下一篇：支付宝突破微信封锁唤起支付宝代码

您可能还会对这些文章感兴趣

雷军22年前写的程序代码保准你没见过！

作为小米科技的创始人、董事长和首席执行官，雷军的名字如雷贯耳。上午W3Cschool发布了一篇“刘强东的代码水平如何”(有兴趣的可以点击右上角关注我们)的文章，有网友在下面回复“代码只服雷军”。这个回复吸引了W3Cschool的注...
只会用jQuery前端到底low不low?

如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，我是考了成考的北京航空航天大学，也马上快...
UED原型设计工具Axure汉化版

Axure汉化版已经发布，版本号Axure 5.1.0.1699，下面是截图效果 Axure汉化版文件下载地址：Axure汉化补丁 Axure RP pro 5.1.0.1699 下载地址注册用户名：Axure 序列...
百度公共DNS无劫持IP 从此上网无阻

今天百度推出公共DNS服务，IP地址为180.76.76.76，号称拥有遍布全国的递归出口节点，可以做到更稳定，纯净无劫持等。 DNS在现有整个互联网基础架构中也扮演着流量”调度员”、”指引员”的角色。尽管已经有超过30年历史,DNS仍...
小伙打造网站媒体帝国月访问量4500万

　　BI中文站 6月7日报道艾默生·斯帕茨(Emerson Spartz)今年28岁，已婚，是Spartz Inc公司的首席执行官。Spartz Inc是一个网站媒体帝国，旗下的30多家网站专门发布有趣、励志和让人感到不可思议的文章和帖子，其分享量非常...