Three.js與webVR

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.js examples中也提供了關於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之旅吧！