WebVR如此近 - three.js的WebVR示例程式解析
關于WebVR
最近VR的發展十分吸引人們的眼球，很多同學應該也心癢癢的想體驗VR裝置，然而現在的專業硬體價格還比較高，入手一個估計就要吃土了。但是，對于我們前端開發者來說，我們不僅可以簡單地在手機上進行視覺上的VR體驗，還可以立馬上手進行Web端VR應用的開發！
WebVR是一個實驗性的Javascript API，允許HMD（head-mounted displays）連接配接到web apps，同時能夠接受這些裝置的位置和動作資訊。這讓使用Javascript開發VR應用成為可能（當然已經有很多接口API讓Javascript作為開發語言了，不過這并不影響我們為WebVR感到興奮）。而讓我們能夠立馬進行預覽與體驗，移動裝置上的chrome已經支援了WebVR并使手機作為一個簡易的HMD。手機可以把螢幕分成左右眼視覺并應用手機中的加速度計、陀螺儀等感應器，你需要做的或許就隻是買一個cardboard。不說了，我去下單了！
cardborad紙盒，一頓食堂飯錢即可入手
前言
WebVR仍處于w3c的草案階段，是以開發和體驗都需要polyfill。
這篇解析基于
webvr-boilerplate，這個示例的作者，任職google的
Boris Smus同時也編寫了
webvr-polyfill。
three.jsexamples中也提供了關于VR的控制例子。這裡主要通過對代碼注釋的方式來解讀關鍵的檔案。
示例的最終效果如下，打開
http://soaanyip.github.io/webvr-boilerplate-cn/并把手機放進cardboard即可體驗。你也可以在我的github
https://github.com/SoAanyip/WebVR-Boilerplate-CN/對照有關的代碼和注釋
按照慣例，這篇解析預設你至少有three.js相關的基礎知識。有興趣也可以浏覽一下我之前寫的
ThreeJS 輕松實作主視覺太陽系漫遊。
這篇解析中three.js的版本為V76。文中如有各種錯誤請指出！
先從html開始
在示例中隻用到了一個index.html。首先meta标簽有幾個值得注意的：
1 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
2 <meta name="mobile-web-app-capable" content="yes">
3 <meta name="apple-mobile-web-app-capable" content="yes" />
4 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 這幾個标簽對web app開發的同學來說應該是十分熟悉了。其中 shrink-to-fit=no 是Safari的特性，禁止頁面通過縮放去适應适口。
接下來在js引用的部分，引用了這幾個資源：
1 <script src="node_modules/es6-promise/dist/es6-promise.js"></script> 引入的一個promise polyfill；
1 <script src="node_modules/three/three.js"></script> three.js核心庫
1 <script src="node_modules/three/examples/js/controls/VRControls.js"></script> 從連接配接的VR裝置中獲得位置資訊并應用在camera對象上，将在下文展開；
1 <script src="node_modules/three/examples/js/effects/VREffect.js"></script> 處理立體視覺和繪制相關，将在下文展開；
1 <script src="node_modules/webvr-polyfill/build/webvr-polyfill.js"></script> WebVR polyfill，下文簡述調用的API option；
1 <script src="build/webvr-manager.js"></script> 界面按鈕以及進入/退出VR模式的控制等。
具體的整個項目檔案，可以在
這裡檢視有關的代碼和注釋。
VRControls.js - HMD狀态感應
這個檔案主要對HMD的狀态資訊進行擷取并應用到camera上。例如在手機上顯示的時候，手機的旋轉傾斜等就會直接作用到camera上。
第一步是擷取連接配接的VR裝置,這一步是基本通過WebVR的API進行的：
1 //擷取VR裝置（作為資訊輸入源。如有多個則隻取第一個）
2 function gotVRDevices( devices ) {
3 for ( var i = 0; i < devices.length; i ++ ) {
4 if ( ( 'VRDisplay' in window && devices[ i ] instanceof VRDisplay ) || ( 'PositionSensorVRDevice' in window && devices[ i ] instanceof PositionSensorVRDevice ) ) {
5 vrInput = devices[ i ];
6 break; // We keep the first we encounter
7 }
8 }
9
10 if ( !vrInput ) {
11 if ( onError ) onError( 'VR input not available.' );
12 }
13 }
14 //調用WebVR API擷取VR裝置
15 if ( navigator.getVRDisplays ) {
16 navigator.getVRDisplays().then( gotVRDevices );
17 } else if ( navigator.getVRDevices ) {
18 // Deprecated API.
19 navigator.getVRDevices().then( gotVRDevices );
20 } 然後是三個關于位置的參數：
1 // the Rift SDK returns the position in meters
2 // this scale factor allows the user to define how meters
3 // are converted to scene units.
4 //Rift SDK傳回的位置資訊是以米作為機關的。這裡可以定義以幾倍的縮放比例轉換為three.js中的長度。
5 this.scale = 1;
6
7 // If true will use "standing space" coordinate system where y=0 is the
8 // floor and x=0, z=0 is the center of the room.
9 //表示使用者是否站立姿态。當為false時camra會在y=0的位置，而為true時會結合下面的模拟身高來決定camera的y值。
10 //在無法擷取使用者姿勢資訊的裝置上，需要在調用時直接指定是站姿還是坐姿。
11 this.standing = false;
12
13 // Distance from the users eyes to the floor in meters. Used when
14 // standing=true but the VRDisplay doesn't provide stageParameters.
15 //當為站立姿态時，使用者的眼睛（camera）的高度（跟如有硬體時傳回的機關一緻，為米）。這裡會受scale的影響。如scale為2時，實際camera的高度就是3.2。
16 this.userHeight = 1.6; 通過WebVR API擷取到使用者的裝置資訊，并應用到camera上，是一個持續進行的過程。是以這部分的資訊更新會在requestAnimationFrame中不斷地調用。
1 //将在requestAnimationFrame中應用更新
2 this.update = function () {
3 if ( vrInput ) {
4 if ( vrInput.getPose ) {
5 //方法傳回傳感器在某一時刻的資訊(object)。例如包括時間戳、位置(x,y,z)、線速度、線加速度、角速度、角加速度、方向資訊。
6 var pose = vrInput.getPose();
7 //orientation 方向
8 if ( pose.orientation !== null ) {
9 //quaternion 四元數
10 //把裝置的方向複制給camera
11 object.quaternion.fromArray( pose.orientation );
12 }
13 //位置資訊
14 if ( pose.position !== null ) {
15 //同樣把裝置的位置複制給camera
16 object.position.fromArray( pose.position );
17 } else {
18 object.position.set( 0, 0, 0 );
19 }
20
21 } else {
22 // Deprecated API.
23 var state = vrInput.getState();
24 if ( state.orientation !== null ) {
25 object.quaternion.copy( state.orientation );
26 }
27 if ( state.position !== null ) {
28 object.position.copy( state.position );
29 } else {
30 object.position.set( 0, 0, 0 );
31 }
32 }
33
34 //TODO 此塊會一直執行
35 if ( this.standing ) {
36 //如果硬體傳回場景資訊，則應用硬體傳回的資料來進行站姿轉換
37 if ( vrInput.stageParameters ) {
38 object.updateMatrix();
39 //sittingToStandingTransform傳回一個Matrix4,表示從坐姿到站姿的變換。
40 standingMatrix.fromArray(vrInput.stageParameters.sittingToStandingTransform);
41 //應用變換到camera。
42 object.applyMatrix( standingMatrix );
43 } else {
44 //如果vrInput不提供y高度資訊的話使用userHeight作為高度
45 object.position.setY( object.position.y + this.userHeight );
46 }
47
48 }
49 //使用上面定義的this.scale來縮放camera的位置。
50 object.position.multiplyScalar( scope.scale );
51 }
52 }; 以上是vrcontrols的關鍵代碼。
VREffect.js - 立體視覺
VREffect.js主要把螢幕顯示切割為左右眼所視的螢幕，兩個螢幕所顯示的内容具有一定的差異，使得人的雙目立體視覺可以把螢幕中的内容看得立體化。這個檔案主要的流程如下圖：
首先是對畫布大小進行了設定。其中renderer.setPixelRatio( 1 ); 是防止在retina等螢幕上出現圖像變形等顯示問題。
1 //初始化或者resize的時候進行。
2 this.setSize = function ( width, height ) {
3 rendererSize = { width: width, height: height };
4
5 //是否VR模式中
6 if ( isPresenting ) {
7 //getEyeParameters包含了渲染某個眼睛所視的螢幕的資訊，例如offset,FOV等
8 var eyeParamsL = vrHMD.getEyeParameters( 'left' );
9 //裝置像素比
10 //若裝置像素比不為1時會出現顯示問題。
11 //https://github.com/mrdoob/three.js/pull/6248
12 renderer.setPixelRatio( 1 );
13
14 if ( isDeprecatedAPI ) {
15 renderer.setSize( eyeParamsL.renderRect.width * 2, eyeParamsL.renderRect.height, false );
16
17 } else {
18 renderer.setSize( eyeParamsL.renderWidth * 2, eyeParamsL.renderHeight, false );
19 }
20
21 } else {
22 renderer.setPixelRatio( rendererPixelRatio );
23 renderer.setSize( width, height );
24 }
25 }; 然後是關于全屏模式的設定，這裡跟上面的設定差不遠：
1 //顯示裝置進入全屏顯示模式
2 function onFullscreenChange () {
3 var wasPresenting = isPresenting;
4 isPresenting = vrHMD !== undefined && ( vrHMD.isPresenting || ( isDeprecatedAPI && document[ fullscreenElement ] instanceof window.HTMLElement ) );
5 if ( wasPresenting === isPresenting ) {
6 return;
7 }
8
9 //如果此次事件是進入VR模式
10 if ( isPresenting ) {
11 rendererPixelRatio = renderer.getPixelRatio();
12 rendererSize = renderer.getSize();
13
14 //getEyeParameters包含了渲染某個眼睛所視的螢幕的資訊，例如offset,FOV等
15 var eyeParamsL = vrHMD.getEyeParameters( 'left' );
16 var eyeWidth, eyeHeight;
17
18 if ( isDeprecatedAPI ) {
19 eyeWidth = eyeParamsL.renderRect.width;
20 eyeHeight = eyeParamsL.renderRect.height;
21 } else {
22 eyeWidth = eyeParamsL.renderWidth;
23 eyeHeight = eyeParamsL.renderHeight;
24 }
25 renderer.setPixelRatio( 1 );
26 renderer.setSize( eyeWidth * 2, eyeHeight, false );
27
28 } else {
29 renderer.setPixelRatio( rendererPixelRatio );
30 renderer.setSize( rendererSize.width, rendererSize.height );
31 }
32 } 接下來是對表示左右眼的camera的設定。兩個camera也肯定是PerspectiveCamera：
1 var cameraL = new THREE.PerspectiveCamera();
2 //左camera顯示layer 1層（即當某個元素隻出現在layer 1時，隻有cameraL可見。）
3 cameraL.layers.enable( 1 );
4
5 var cameraR = new THREE.PerspectiveCamera();
6 cameraR.layers.enable( 2 ); 從WebVR API中擷取關于某個眼睛所視的螢幕的資訊：
1 //getEyeParameters包含了渲染某個眼睛所視的螢幕的資訊，例如offset,FOV等
2 var eyeParamsL = vrHMD.getEyeParameters( 'left' );
3 var eyeParamsR = vrHMD.getEyeParameters( 'right' );
4
5 if ( ! isDeprecatedAPI ) {
6 // represents the offset from the center point between the user's eyes to the center of the eye, measured in meters.
7 //瞳距的偏移
8 eyeTranslationL.fromArray( eyeParamsL.offset );
9 eyeTranslationR.fromArray( eyeParamsR.offset );
10 //represents a field of view defined by 4 different degree values describing the view from a center point.
11 //獲得左右眼的FOV
12 eyeFOVL = eyeParamsL.fieldOfView;
13 eyeFOVR = eyeParamsR.fieldOfView;
14
15 } else {
16 eyeTranslationL.copy( eyeParamsL.eyeTranslation );
17 eyeTranslationR.copy( eyeParamsR.eyeTranslation );
18 eyeFOVL = eyeParamsL.recommendedFieldOfView;
19 eyeFOVR = eyeParamsR.recommendedFieldOfView;
20 }
21
22 if ( Array.isArray( scene ) ) {
23 console.warn( 'THREE.VREffect.render() no longer supports arrays. Use object.layers instead.' );
24 scene = scene[ 0 ];
25 } 由于左右camera的視錐體還沒确定，需要對獲得的FOV資訊進行計算來确定。在涉及透視投影矩陣的部分會比較複雜，是以這裡不展開來說。如果有錯誤請指出：
1 cameraL.projectionMatrix = fovToProjection( eyeFOVL, true, camera.near, camera.far );
2 cameraR.projectionMatrix = fovToProjection( eyeFOVR, true, camera.near, camera.far );
3
4 //角度弧度的轉換，然後進行後續的計算
5 function fovToProjection( fov, rightHanded, zNear, zFar ) {
6 //角度轉換為弧度 如30度轉為1/6 PI
7 var DEG2RAD = Math.PI / 180.0;
8
9 var fovPort = {
10 upTan: Math.tan( fov.upDegrees * DEG2RAD ),
11 downTan: Math.tan( fov.downDegrees * DEG2RAD ),
12 leftTan: Math.tan( fov.leftDegrees * DEG2RAD ),
13 rightTan: Math.tan( fov.rightDegrees * DEG2RAD )
14 };
15
16 return fovPortToProjection( fovPort, rightHanded, zNear, zFar );
17 }
18
19 //根據從裝置獲得的FOV以及相機設定的near、far來生成透視投影矩陣
20 function fovPortToProjection( fov, rightHanded, zNear, zFar ) {
21
22 //使用右手坐标
23 rightHanded = rightHanded === undefined ? true : rightHanded;
24 zNear = zNear === undefined ? 0.01 : zNear;
25 zFar = zFar === undefined ? 10000.0 : zFar;
26
27 var handednessScale = rightHanded ? - 1.0 : 1.0;
28
29 // start with an identity matrix
30
31 var mobj = new THREE.Matrix4();
32 var m = mobj.elements;
33
34 // and with scale/offset info for normalized device coords
35 var scaleAndOffset = fovToNDCScaleOffset( fov );
36
37 //建立透視投影矩陣
38
39 // X result, map clip edges to [-w,+w]
40 m[ 0 * 4 + 0 ] = scaleAndOffset.scale[ 0 ];
41 m[ 0 * 4 + 1 ] = 0.0;
42 m[ 0 * 4 + 2 ] = scaleAndOffset.offset[ 0 ] * handednessScale;
43 m[ 0 * 4 + 3 ] = 0.0;
44
45 // Y result, map clip edges to [-w,+w]
46 // Y offset is negated because this proj matrix transforms from world coords with Y=up,
47 // but the NDC scaling has Y=down (thanks D3D?)
48 //NDC（歸一化裝置坐标系）是左手坐标系
49 m[ 1 * 4 + 0 ] = 0.0;
50 m[ 1 * 4 + 1 ] = scaleAndOffset.scale[ 1 ];
51 m[ 1 * 4 + 2 ] = - scaleAndOffset.offset[ 1 ] * handednessScale;
52 m[ 1 * 4 + 3 ] = 0.0;
53
54 // Z result (up to the app)
55 m[ 2 * 4 + 0 ] = 0.0;
56 m[ 2 * 4 + 1 ] = 0.0;
57 m[ 2 * 4 + 2 ] = zFar / ( zNear - zFar ) * - handednessScale;
58 m[ 2 * 4 + 3 ] = ( zFar * zNear ) / ( zNear - zFar );
59
60 // W result (= Z in)
61 m[ 3 * 4 + 0 ] = 0.0;
62 m[ 3 * 4 + 1 ] = 0.0;
63 m[ 3 * 4 + 2 ] = handednessScale;
64 m[ 3 * 4 + 3 ] = 0.0;
65
66 //轉置矩陣，因為mobj.elements是column-major的
67 mobj.transpose();
68
69 return mobj;
70 }
71
72 //計算線性插值資訊
73 function fovToNDCScaleOffset( fov ) {
74
75 var pxscale = 2.0 / ( fov.leftTan + fov.rightTan );
76 var pxoffset = ( fov.leftTan - fov.rightTan ) * pxscale * 0.5;
77 var pyscale = 2.0 / ( fov.upTan + fov.downTan );
78 var pyoffset = ( fov.upTan - fov.downTan ) * pyscale * 0.5;
79 return { scale: [ pxscale, pyscale ], offset: [ pxoffset, pyoffset ] };
80 } 之後是确定左右camera的位置和方向。由于左右眼（左右camera）肯定是在頭部（主camera，位置和方向由HMD傳回的資訊确定）上的，在我們獲得把眼睛從頭部飛出去的超能力之前，左右camera的位置和方向都是根據主camera來設定的。
1 //使主camera的位移、旋轉、縮放變換分解，作用到左camra 右camera上。
2 camera.matrixWorld.decompose( cameraL.position, cameraL.quaternion, cameraL.scale );
3 camera.matrixWorld.decompose( cameraR.position, cameraR.quaternion, cameraR.scale );
4
5 var scale = this.scale;
6 //左右眼camera根據瞳距進行位移。
7 cameraL.translateOnAxis( eyeTranslationL, scale );
8 cameraR.translateOnAxis( eyeTranslationR, scale ); 最後便是對兩個區域進行渲染。
1 // 渲染左眼視覺
2 renderer.setViewport( renderRectL.x, renderRectL.y, renderRectL.width, renderRectL.height );
3 renderer.setScissor( renderRectL.x, renderRectL.y, renderRectL.width, renderRectL.height );
4 renderer.render( scene, cameraL );
5
6 // 渲染右眼視覺
7 renderer.setViewport( renderRectR.x, renderRectR.y, renderRectR.width, renderRectR.height );
8 renderer.setScissor( renderRectR.x, renderRectR.y, renderRectR.width, renderRectR.height );
9 renderer.render( scene, cameraR ); VREffect檔案的關鍵點差不多是上述這些。
webvr-polyfill.js - 讓現在使用WebVR成為可能
webvr-polyfill.js 根據WebVR API的草案來實作了一套polyfill。例如根據所處環境是pc還是手機來确定使用的是 CardboardVRDisplay 還是 MouseKeyboardVRDisplay ，在手機環境下的話使用 Device API 來處理手機旋轉、方向等參數的擷取。此外作者還順便做了幾個提示圖示和畫面來優化體驗。在這裡我們來看一下其API參數：
1 WebVRConfig = {
2 /**
3 * webvr-polyfill configuration
4 */
5
6 // Flag to disabled the UI in VR Mode.
7 //是否禁用VR模式的UI。
8 CARDBOARD_UI_DISABLED: false, // Default: false
9
10 // Forces availability of VR mode.
11 //是否強制使VR模式可用。
12 //FORCE_ENABLE_VR: true, // Default: false.
13
14 // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
15 //互補濾波系數。加速度計在靜止的時候是很準的，但運動時的角度噪聲很大，陀螺儀反之。
16 //互補濾波器徘徊在信任陀螺儀和加速度計的邊界。首先選擇一個時間常數，然後用它來計算濾波器系數。
17 //例如陀螺儀的漂移是每秒2度，則可能需要一個少于一秒的時間常數去保證在每一個方向上的漂移不會超過2度。
18 //但是當時間常數越低，越多加速度計的噪聲将允許通過。是以這是一個權衡的内容。
19 //K_FILTER: 0.98, // Default: 0.98.
20
21 // Flag to disable the instructions to rotate your device.
22 //是否禁用旋轉裝置的提示（橫放手機以進入全屏）。
23 ROTATE_INSTRUCTIONS_DISABLED: false, // Default: false
24
25 // How far into the future to predict during fast motion.
26 //由于有給定的方向以及陀螺儀資訊，選擇允許預測多長時間之内的裝置方向，在裝置快速移動的情況下可以讓渲染比較流暢。
27 //PREDICTION_TIME_S: 0.040, // Default: 0.040 (in seconds).
28
29 // Flag to disable touch panner. In case you have your own touch controls、
30 //是否禁用提供的觸摸控制，當你有自己的觸摸控制方式時可以禁用
31 //TOUCH_PANNER_DISABLED: true, // Default: false.
32
33 // To disable keyboard and mouse controls, if you want to use your own
34 // implementation.
35 //是否禁用pc下的滑鼠、鍵盤控制。同上。
36 //MOUSE_KEYBOARD_CONTROLS_DISABLED: true, // Default: false.
37
38 // Enable yaw panning only, disabling roll and pitch. This can be useful for
39 // panoramas with nothing interesting above or below.
40 // 僅關心左右角度變化，忽略上下和傾斜等。
41 // YAW_ONLY: true, // Default: false.
42
43 // Prevent the polyfill from initializing immediately. Requires the app
44 // to call InitializeWebVRPolyfill() before it can be used.
45 //是否阻止元件直接進行初始化建構。如果為true則需要自己調用InitializeWebVRPolyfill()。
46 //DEFER_INITIALIZATION: true, // Default: false.
47
48 // Enable the deprecated version of the API (navigator.getVRDevices).
49 //允許使用過時版本的API。
50 //ENABLE_DEPRECATED_API: true, // Default: false.
51
52 // Scales the recommended buffer size reported by WebVR, which can improve
53 // performance. Making this very small can lower the effective resolution of
54 // your scene.
55 //在VR顯示模式下對WebVR推薦的螢幕比例進行縮放。在IOS下如果不為0.5會出現顯示問題，檢視
56 //https://github.com/borismus/webvr-polyfill/pull/106
57 BUFFER_SCALE: 0.5, // default: 1.0
58
59 // Allow VRDisplay.submitFrame to change gl bindings, which is more
60 // efficient if the application code will re-bind it's resources on the
61 // next frame anyway.
62 // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
63 // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
64 // and gl.TEXTURE_BINDING_2D for texture unit 0
65 // Warning: enabling this might lead to rendering issues.
66 //允許 VRDisplay.submitFrame使用髒矩形渲染。但是開啟此特性可能會出現渲染問題。
67 //DIRTY_SUBMIT_FRAME_BINDINGS: true // default: false
68 }; 其config主要是對一些使用者可選項進行設定。在檔案内部，更多的是對 Device API 的應用等等。
現在就開始編寫WebVR應用吧！
在示例的最後是一個顯示簡單的旋轉立方體的demo。此處可以幫助我們學習怎麼建立一個WebVR應用。
首先是建立好scene、renderer、camera的三要素：
1 // Setup three.js WebGL renderer. Note: Antialiasing is a big performance hit.
2 // Only enable it if you actually need to.
3 var renderer = new THREE.WebGLRenderer({antialias: true});
4 renderer.setPixelRatio(window.devicePixelRatio);
5
6 // Append the canvas element created by the renderer to document body element.
7 document.body.appendChild(renderer.domElement);
8
9 // Create a three.js scene.
10 var scene = new THREE.Scene();
11
12 // Create a three.js camera.
13 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000); 對上面解析過的controls、effect進行調用：
1 // Apply VR headset positional data to camera.
2 var controls = new THREE.VRControls(camera);
3 //站立姿态
4 controls.standing = true;
5
6 // Apply VR stereo rendering to renderer.
7 var effect = new THREE.VREffect(renderer);
8 effect.setSize(window.innerWidth, window.innerHeight);
9
10 // Create a VR manager helper to enter and exit VR mode.
11 //按鈕和全屏模式管理
12 var params = {
13 hideButton: false, // Default: false.
14 isUndistorted: false // Default: false.
15 };
16 var manager = new WebVRManager(renderer, effect, params); 在場景中，添加一個網格顯示的空間，在空間内加入一個小立方體：
1 // Add a repeating grid as a skybox.
2 var boxSize = 5;
3 var loader = new THREE.TextureLoader();
4 loader.load('img/box.png', onTextureLoaded);
5
6 function onTextureLoaded(texture) {
7 texture.wrapS = THREE.RepeatWrapping;
8 texture.wrapT = THREE.RepeatWrapping;
9 texture.repeat.set(boxSize, boxSize);
10
11 var geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
12 var material = new THREE.MeshBasicMaterial({
13 map: texture,
14 color: 0x01BE00,
15 side: THREE.BackSide
16 });
17
18 // Align the skybox to the floor (which is at y=0).
19 skybox = new THREE.Mesh(geometry, material);
20 skybox.position.y = boxSize/2;
21 scene.add(skybox);
22
23 // For high end VR devices like Vive and Oculus, take into account the stage
24 // parameters provided.
25 //在高端的裝置上，要考慮到裝置提供的場景資訊的更新。
26 setupStage();
27 }
28
29 // Create 3D objects.
30 var geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
31 var material = new THREE.MeshNormalMaterial();
32 var cube = new THREE.Mesh(geometry, material);
33
34 // Position cube mesh to be right in front of you.
35 cube.position.set(0, controls.userHeight, -1);
36
37 scene.add(cube); 最後便是設定requestAnimationFrame的更新。在animate的函數中，不但要考慮立方體的旋轉問題，更重要的是要不斷地擷取HMD傳回的資訊以及對camera進行更新。
1 // Request animation frame loop function
2 var lastRender = 0;
3 function animate(timestamp) {
4 var delta = Math.min(timestamp - lastRender, 500);
5 lastRender = timestamp;
6
7 //立方體的旋轉
8 cube.rotation.y += delta * 0.0006;
9
10 // Update VR headset position and apply to camera.
11 //更新擷取HMD的資訊
12 controls.update();
13
14 // Render the scene through the manager.
15 //進行camera更新和場景繪制
16 manager.render(scene, camera, timestamp);
17
18 requestAnimationFrame(animate);
19 } 總結
以上便是此示例的各個檔案的解析。我相信VR的形式除了在遊戲上的應用的前景，在其他方面也有其值得探索的可行性。是以讓我們一起來開始WebVR之旅吧！
感謝您的閱讀，如果您對我的部落格所講述的内容有興趣，請繼續關注我的後續部落格，我是yswenli 。