WebVR基础知识与讲解源码案例

WebVR即web + VR的体验方式，本文介绍如何开发一个WebVR网页，在此之前，我们有必要了解WebVR的体验方式。

体验WebVR的方式

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

VR模式

1.Mobile VR

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

2.PC VR

通过佩戴Oculus Rift的分离式头显浏览连接在PC主机端的网页，现支持WebVR API的浏览器主要是火狐的 Firefox Nightly和设置VR enabled的谷歌chrome beta。

裸眼模式

除了VR模式下的体验方式，这里还考虑了裸眼下的体验浏览网页的方式，在PC端如果探测的用户选择进入VR模式，应让用户可以使用鼠标拖拽场景，而在智能手机上则应让用户可以使用touchmove或旋转倾斜手机的方式来改变场景视角。
WebVR的概念大概就如此，这次我们将采用cardboard + mobile的方式来测试我们的WebVR场景，现在踏上我们的开发之旅。

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

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

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

首先我们创建一个HTML文件

接下来编写js脚本，开始创建我们的3d场景。

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

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

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

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

至此，我们已经绘制了一个简单的3d场景并且让它动了起来，接下来，我们需要让我们的场景可以支持WebVR模式。

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

这里需要通过按钮控制当前的渲染模式逻辑如下：

我们可以在vrdisplaypresentchange事件中根据isPresenting的值来改变按钮的UI，而three.js将根据isPresenting的值来决定是常规渲染还是vr模式渲染，在vr模式下，three.js将创建两个camera进行渲染。

最后，将WebVR应用写成ES6 class，按照下图进行代码规范：

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

完整代码：github.com/YoneChen/WebVR-helloworld。

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

© 著作权归作者所有

欢迎自媒体入驻WebGL学习网，

获百万流量，打造个人技术品牌！

聚合全网技术文章，根据你的阅读喜好进行个性推荐

原文地址：https://my.oschina.net/u/3499139/blog/907146