关灯
请选择 进入手机版 | 继续访问电脑版
开启左侧

WebVR标准入门开发教程在这里

[复制链接]
admin 发表于 2019-4-1 16:58:22 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
  WebVR标准入门开发教程在这里。WebVR即web+VR的体验方式,本文介绍如何开发一个WebVR网页,在此之前,我们有必要了解WebVR的体验方式。

  WebVR体验模式

  体验WebVR的方式

  WebVR的体验方式可以分为VR模式和裸眼模式

  VR模式

  1.MobileVR

  如使用cardboard眼镜来体验手机浏览器的webVR网页,浏览器将根据水平陀螺仪的参数来获取用户的头部倾斜和转动的朝向,并告知页面需要渲染哪一个朝向的场景。

  2.PCVR

  通过佩戴OculusRift的分离式头显浏览连接在PC主机端的网页,现支持WebVRAPI的浏览器主要是火狐的 FirefoxNightly和设置VRenabled的谷歌chromebeta。

  裸眼模式

  除了VR模式下的体验方式,这里还考虑了裸眼下的体验浏览网页的方式,在PC端如果探测的用户选择进入VR模式,应让用户可以使用鼠标拖拽场景,而在智能手机上则应让用户可以使用touchmove或旋转倾斜手机的方式来改变场景视角。

  WebVR的概念大概就如此,这次我们将采用cardboard+mobile的方式来测试我们的WebVR场景,现在踏上我们的开发之旅。

  准备工作

  测试工具:智能手机+cardboard式头显+chromebeta60+(需开启WebVR选项)

  如果你练就了裸眼就能将手机双屏画面看成单屏的能力也可以省下头显。

  技术和框架:three.jsforWebGL

  Three.js是构建3d场景的框架,它封装了WebGL函数,简化了创建场景的代码成本,利用three.js我们可以更优雅地创建出三维场景和三维动画,这里我使用的是0.86版本。如果想了解纯WebGL开发WebVR应用以及WebVR具体环境配置,可以参考 webvr教程--深度剖析。

  需要引入的js插件:1.three.min.js 2.webvr-polyfill.js

  webvr-polyfill.js

  由于WebVRAPI还没被各大主流浏览器支持,因此需要引入webvr-polyfill.js来支持WebVR网页,它提供了大量VR相关的API,比如Navigator.getVRDisplay()获取VR头显信息的方法。

  3D场景构建

  首先我们创建一个HTML文件

WebVR标准入门开发教程在这里

WebVR标准入门开发教程在这里(1)
  接下来编写js脚本,开始创建我们的3d场景。

  1.创建场景

  Three.js中的scene场景是绘制我们3d对象的整个容器

WebVR标准入门开发教程在这里

WebVR标准入门开发教程在这里(2)
  2.添加相机

  Three.js中的camera相机代表用户的眼睛,我们通过设置FOV确定视野范围,

WebVR标准入门开发教程在这里

WebVR标准入门开发教程在这里(3)
  3.添加渲染器

  Three.js的渲染器用来渲染camera所看到的画面

WebVR标准入门开发教程在这里

WebVR标准入门开发教程在这里(4)
  4.添加一个立方体网格

WebVR标准入门开发教程在这里

WebVR标准入门开发教程在这里(5)
  5.启动动画

  动画渲染的原理:渲染器的持续调用绘制方法,方法里动态改变物体的属性。旧版的three.js需要手动调用requestAnimationFrame()方法递归的方式来渲染动画,新版three.js已经封装了该属性,因此只需要通过渲染器renderer.animate(callback)。

WebVR标准入门开发教程在这里

WebVR标准入门开发教程在这里(6)
  至此,我们已经绘制了一个简单的3d场景并且让它动了起来,接下来,我们需要让我们的场景可以支持WebVR模式。

  WebVR场景开发

  使用navigator.getVRDisplays获取vr设备实例vrdisplay,我们需要将它传给当前运行的renderer渲染器,当点击按钮时可以进入VR模式,再次点击退出VR模式。

WebVR标准入门开发教程在这里

WebVR标准入门开发教程在这里(7)
  这里需要通过按钮控制当前的渲染模式逻辑如下:

  当点击按钮时,根据display.isPresenting判断当前是否是使用vr设备下进行渲染,如果false,进入2,否则true进入3

  当前非VR模式,点击按钮进入VR模式,此时调用display.requestPresent(),display.isPresenting被设置为true,触发window的vrdisplaypresentchange事件

  当前为VR模式,点击按钮退出模式,此时调用display.exitPresent(),display.isPresenting被设置为false,触发window的vrdisplaypresentchange事件

WebVR标准入门开发教程在这里

WebVR标准入门开发教程在这里(8)
  我们可以在vrdisplaypresentchange事件中根据isPresenting的值来改变按钮的UI,而three.js将根据isPresenting的值来决定是常规渲染还是vr模式渲染,在vr模式下,three.js将创建两个camera进行渲染。

  最后,将WebVR应用写成ES6class,按照下图进行代码规范:

  第一步,构造函数先初始化VR场景、相机和渲染器;第二步,在渲染之前调用start方法,在start方法里我们为场景创建3d物体;最后,调起renderer.animate(this.update)开启动画渲染,update方法里我们可动态操作物体属性,具体代码如下:

WebVR标准入门开发教程在这里

WebVR标准入门开发教程在这里(9)

WebVR标准入门开发教程在这里

WebVR标准入门开发教程在这里(10)
  结语:目前,国外的谷歌、火狐、Facebook和国内百度已推出支持WebVR浏览器的版本,微软也宣布将推出自己的VR浏览器,随着后期5g网络极速时代的到来以及HMD头显的价格和平台的成熟,WebVR的体验方式将是革命性的,用户通过WebVR浏览网上商店,线上教学可进行“面对面”师生交流等,基于这种种应用场景,我们可以找到一个更好的动力去学习WebVR。



人总喜欢别人骗自己,就是不喜欢自己骗自己。
 

精彩评论1

正序浏览
nssb 发表于 2019-4-30 20:09:29 | 显示全部楼层
 
66666666666666666
回复 支持 反对

使用道具 举报

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 最新帖子
  • 最热帖子
  • 精华帖子

关注我们:微信订阅号

客服QQ:

1973808489

上班时间:9:00 -- 21:00

Email:1973808489#qq.com (请把#换成@)

Copyright   ©2015-2016  VR社区Powered by©soupv.cn!