WebVR的體驗(yàn)方式可以分為VR模式和裸眼模式

1.Mobile VR

如使用cardboard眼鏡來(lái)體驗(yàn)手機(jī)瀏覽器的webVR網(wǎng)頁(yè)，瀏覽器將根據(jù)水平陀螺儀的參數(shù)來(lái)獲取用戶的頭部?jī)A斜和轉(zhuǎn)動(dòng)的朝向，并告知頁(yè)面需要渲染哪一個(gè)朝向的場(chǎng)景。

2.PC VR

通過(guò)佩戴Oculus Rift的分離式頭顯瀏覽連接在PC主機(jī)端的網(wǎng)頁(yè)，現(xiàn)支持WebVR API的瀏覽器主要是火狐的?Firefox Nightly和設(shè)置VR enabled的谷歌chrome beta。

除了VR模式下的體驗(yàn)方式，這里還考慮了裸眼下的體驗(yàn)瀏覽網(wǎng)頁(yè)的方式，在PC端如果探測(cè)的用戶選擇進(jìn)入VR模式，應(yīng)讓用戶可以使用鼠標(biāo)拖拽場(chǎng)景，而在智能手機(jī)上則應(yīng)讓用戶可以使用touchmove或旋轉(zhuǎn)傾斜手機(jī)的方式來(lái)改變場(chǎng)景視角。
WebVR的概念大概就如此，這次我們將采用cardboard + mobile的方式來(lái)測(cè)試我們的WebVR場(chǎng)景，現(xiàn)在踏上我們的開發(fā)之旅。

測(cè)試工具：智能手機(jī) + cardboard式頭顯 + chrome beta 60+（需開啟WebVR選項(xiàng)）

如果你練就了裸眼就能將手機(jī)雙屏畫面看成單屏的能力也可以省下頭顯。

技術(shù)和框架：three.js for WebGL

Three.js是構(gòu)建3d場(chǎng)景的框架，它封裝了WebGL函數(shù)，簡(jiǎn)化了創(chuàng)建場(chǎng)景的代碼成本，利用three.js我們可以更優(yōu)雅地創(chuàng)建出三維場(chǎng)景和三維動(dòng)畫，這里我使用的是0.86版本。
如果想了解純WebGL開發(fā)WebVR應(yīng)用以及WebVR具體環(huán)境配置，可以參考 webvr教程--深度剖析。

需要引入的js插件：

1.three.min.js
2.webvr-polyfill.js 由于WebVR API還沒被各大主流瀏覽器支持，因此需要引入它來(lái)解決兼容性問(wèn)題。

首先我們創(chuàng)建一個(gè)HTML文件

接下來(lái)編寫js腳本，開始創(chuàng)建我們的3d場(chǎng)景。

Three.js中的scene場(chǎng)景是繪制我們3d對(duì)象的整個(gè)容器

var scene = new THREE.Scene();

Three.js中的camera相機(jī)代表用戶的眼睛，我們通過(guò)設(shè)置FOV確定視野范圍，

//定義一個(gè)60°的視角，視線范圍在1到1000的透視相機(jī)
var camera = new THREE. new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
scene.add(camera);

Three.js的渲染器用來(lái)渲染camera所看到的畫面

//初始化渲染器 antialias參數(shù)為ture表示開啟抗鋸齒策略
var renderer = new THREE.WebGLRenderer({ antialias: true } );
//設(shè)置渲染器渲染尺寸
renderer.setSize(window.innerWidth,window.innerHeight);
//設(shè)置渲染背景為白色
renderer.setClearColor(0xeeeeee);
//將渲染場(chǎng)景的canvas放入body標(biāo)簽里
document.body.appendChild(renderer.domElement);

4.添加一個(gè)立方體網(wǎng)格

// 創(chuàng)建立方體
var geometry = new THREE.CubeGeometry( 10,10,10);
var material = new THREE.MeshLambertMaterial( { color: 0xef6500,needsUpdate: true,opacity:1,transparent:true} );
var cube = new THREE.Mesh( geometry, material );
cube.position.set(0,100,-50);
cube.rotation.set(Math.PI/6,Math.PI/4,0);
scene.add(cube);

動(dòng)畫渲染的原理：渲染器的持續(xù)調(diào)用繪制方法，方法里動(dòng)態(tài)改變物體的屬性。
舊版的three.js需要手動(dòng)調(diào)用requestAnimationFrame()方法遞歸的方式來(lái)渲染動(dòng)畫，新版three.js已經(jīng)封裝了該屬性，因此只需要通過(guò)渲染器renderer.animate(callback)。

function update() {
    //讓立方體旋轉(zhuǎn)
    cube.rotation.y += 0.01;
    //渲染器渲染場(chǎng)景，等同于給相機(jī)按下快門
    renderer.render(scene, camera);
}
renderer.animate(update);//啟動(dòng)動(dòng)畫

至此，我們已經(jīng)繪制了一個(gè)簡(jiǎn)單的3d場(chǎng)景并且讓它動(dòng)了起來(lái)，接下來(lái)，我們需要讓我們的場(chǎng)景可以支持WebVR模式。

WebVR網(wǎng)頁(yè)開發(fā)的基本原理是通過(guò)WebVR API獲取VR動(dòng)態(tài)數(shù)據(jù)（VR Display frameData），渲染器根據(jù)VR數(shù)據(jù)來(lái)分別繪制左右屏場(chǎng)景，具體步驟如下：

使用navigator.getVRDisplays獲取vr設(shè)備示例

vrdisplay是vr設(shè)備的實(shí)例，我們需要將它傳給當(dāng)前運(yùn)行的renderer渲染器。

function initVR(renderer) {
    renderer.vr.enabled = true;
    navigator.getVRDisplays().then( function(display) {
        renderer.vr.setDevice(display[0]);
        const button = document.querySelector(".vr-btn");
        VRbutton(display[0],renderer,button,function() {
            button.textContent = "退出VR";
        },function() {
            button.textContent = "進(jìn)入VR";
        });
    }).catch(err => console.warn(err));
}

這里需要通過(guò)按鈕來(lái)控制當(dāng)前的渲染模式：

當(dāng)點(diǎn)擊按鈕時(shí)，根據(jù)display.isPresenting判斷當(dāng)前是否是使用vr設(shè)備下進(jìn)行渲染，如果false，進(jìn)入2，否則true進(jìn)入3

當(dāng)前非VR模式，點(diǎn)擊按鈕進(jìn)入VR模式，此時(shí)調(diào)用display.requestPresent()，display.isPresenting被設(shè)置為true，觸發(fā)window的vrdisplaypresentchange事件

當(dāng)前為VR模式，點(diǎn)擊按鈕退出模式，此時(shí)調(diào)用display.exitPresent()，display.isPresenting被設(shè)置為false，觸發(fā)window的vrdisplaypresentchange事件

/**  VR按鈕控制
    * @param {VRDisplay} display VRDisplay實(shí)例
    * @param {THREE.WebGLRenderer} renderer 渲染器
    * @param {HTMLElement} button VR控制按鈕
    * @param {Function} enterVR 點(diǎn)擊進(jìn)入VR模式時(shí)回調(diào)
    * @param {Function} exitVR 點(diǎn)擊退出VR模式時(shí)回調(diào)
    **/
function VRbutton(display,renderer,button,enterVR,exitVR) {
    if ( display ) {
        button.addEventListener("click", function() {
            // 點(diǎn)擊vr按鈕控制`isPresenting`狀態(tài)
            display.isPresenting ? display.exitPresent() : display.requestPresent( [ { source: renderer.domElement } ] );

        });

        window.addEventListener( "vrdisplaypresentchange", function() {
            // 是否處于vr體驗(yàn)?zāi)Ｊ街?，是則觸發(fā)enterVR，否則觸發(fā)exitVR
            display.isPresenting ? enterVR() : exitVR();
        }, false );

    } else {
        // 找不到vr設(shè)備實(shí)例，則移除按鈕
        button.remove();

    }
}

我們可以在vrdisplaypresentchange事件中根據(jù)isPresenting的值來(lái)改變按鈕的UI，而three.js將根據(jù)isPresenting的值來(lái)決定是常規(guī)渲染還是vr模式渲染，在vr模式下，three.js將創(chuàng)建兩個(gè)camera進(jìn)行渲染。

最后，將WebVR應(yīng)用寫成ES6 class，后面開發(fā)流程將按如下圖結(jié)構(gòu)來(lái)規(guī)范代碼：

第一步，構(gòu)造函數(shù)先初始化VR場(chǎng)景、相機(jī)和渲染器；第二步，在渲染之前調(diào)用start方法，在start方法里我們?yōu)閳?chǎng)景創(chuàng)建3d物體；最后，調(diào)起renderer.animate(this.update)開啟動(dòng)畫渲染，update方法里我們可動(dòng)態(tài)操作物體屬性，具體代碼如下：

class WebVRApp {
    constructor() {
        // 初始化場(chǎng)景
        this.scene = new THREE.Scene();
        // 初始化相機(jī)
        this.camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
        this.scene.add(this.camera);

        // 初始化渲染器
        this.renderer = new THREE.WebGLRenderer({ antialias: true } );
        this.renderer.setSize(window.innerWidth,window.innerHeight);
        this.renderer.setClearColor(0x519EcB);
        this.renderer.setPixelRatio(window.devicePixelRatio);
        document.querySelector(".main-page").appendChild(this.renderer.domElement);

        this.clock = new THREE.Clock();
        // VR初始化
        this.initVR();
        // 往場(chǎng)景添加3d物體
        this.start();
        // 窗口大小調(diào)整監(jiān)聽
        window.addEventListener( "resize", this.resize.bind(this), false );
        // 渲染動(dòng)畫
        this.renderer.animate(this.update.bind(this));
    }
    // 創(chuàng)建3d物體
    start() {
        const {scene,camera} = this;
        // 創(chuàng)建光線
        scene.add(new THREE.AmbientLight(0xFFFFFF));
        this.addLight();
        // 創(chuàng)建地面
        this.addGround(1000,1000);
        // 創(chuàng)建立方體
        this.addCube(2,2,2, 2,-1,-3);
    }
    // VR模式初始化
    initVR() {
        const {renderer} = this;
        renderer.vr.enabled = true;
        // 獲取VRDisplay實(shí)例
        navigator.getVRDisplays().then( display => {
            // 將display實(shí)例傳給renderer渲染器
            renderer.vr.setDevice(display[0]);
            const button = document.querySelector(".vr-btn");
            VRButton.init(display[0],renderer,button,() => button.textContent = "退出VR",() => button.textContent = "進(jìn)入VR");
        }).catch(err => console.warn(err));
    }
    // 窗口調(diào)整監(jiān)聽
    resize() {
        const {camera,renderer} = this;
        // 窗口調(diào)整重新調(diào)整渲染器
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }
    addCube(width=2,height=2,depth=2, posX,posY,posZ) {
        const {scene} = this;
        // 創(chuàng)建立方體
        const geometry = new THREE.CubeGeometry(width,height,depth);
        const material = new THREE.MeshLambertMaterial({ 
            color: 0xef6500,
            needsUpdate: true,
            opacity:1,
            transparent:true
        });
        const cube = new THREE.Mesh( geometry, material );
        cube.position.set({
            x: posX,
            y: posY,
            z: posZ
        });
        this.cube = cube;
        scene.add(cube);
    }
    addGround(width,height) {
        const {scene} = this;
        // 創(chuàng)建地平面
        const geometry = new THREE.PlaneBufferGeometry( width, height );
        const material = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
        const ground = new THREE.Mesh( geometry, material );
        ground.rotation.x = - Math.PI / 2;
        ground.position.y = -10;
        scene.add(cube);
    }
    // 動(dòng)畫更新
    update() {
        const {scene,camera,renderer,clock} = this;
        const delta = clock.getDelta() * 60;
        // 啟動(dòng)渲染
        this.cube.rotation.y += 0.1 * delta;
        renderer.render(scene, camera);
    }
}
new WebVRApp();

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

目前，國(guó)外的谷歌、火狐、Facebook和國(guó)內(nèi)百度已推出支持WebVR瀏覽器的版本，微軟也宣布將推出自己的VR瀏覽器，隨著后期5g網(wǎng)絡(luò)極速時(shí)代的到來(lái)以及HMD頭顯的價(jià)格和平臺(tái)的成熟，WebVR的體驗(yàn)方式將是革命性的，用戶通過(guò)WebVR瀏覽網(wǎng)上商店，線上教學(xué)可進(jìn)行“面對(duì)面”師生交流等，基于這種種應(yīng)用場(chǎng)景，我們可以找到一個(gè)更好的動(dòng)力去學(xué)習(xí)WebVR。

responisve WebVR: 探討WebVR在不同頭顯(HMD)的適配方案
MolizaVR example: 火狐WebVR示例
webvr-boilerplate: A starting point for web-based VR experiences that work on all VR headsets.
how to build webvr: How to Build VR on the Web Today