three.js走进WebVR世界(一)之webvr-polyfill.js

因为这是第一节课，我们在学习之前先稍微讲一下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或旋转倾斜手机的方式来改变场景视角。

学习这个系列课程需要一定的three.js基础，详情请移步three.js

首先我们先来认识一下webvr-polyfill.js，它是做什么的。

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

如果没有在你的项目中加入这个库，那么在没有支持webvr的浏览器中。比如 36x浏览器。那么你开发者模式下可以看到：
Uncaught TypeError: navigator.getVRDisplays is not a function

避免这个事情发生，我们接下来学习怎么使用 webvr-polyfill.js

首先引入库

然后再你的代码中加入

//  从URL获取配置
var config = (function() {
    var config = {};
    var q = window.location.search.substring(1);
    if (q === '') {
        return config;
    }
    var params = q.split('&');
    var param, name, value;
    for (var i = 0; i < params.length; i++) {
        param = params[i].split('=');
        name = param[0];
        value = param[1];
        // 所有配置值都是布尔值或浮点值
        config[name] = value === 'true' ? true : value === 'false' ? false : parseFloat(value);
    }
    return config;
}
)();
var polyfill = new WebVRPolyfill(config);
console.log("使用WebVR PolyFill版本 " + WebVRPolyfill.version + " 配置: " + JSON.stringify(config));