1 <  name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">2 <  name="mobile-web-app-capable" content="yes">3 <  name="apple-mobile-web-app-capable" content="yes" />4 <  name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

1 <  src="node_modules/es6-promise/dist/es6-promise.js"></ >

1 <  src="node_modules/three/three.js"></ >

1 <  src="node_modules/three/examples/js/controls/VRControls.js"></ > 

1 <  src="node_modules/three/examples/js/effects/VREffect.js"></ > 

1 <  src="node_modules/webvr-polyfill/build/webvr-polyfill.js"></ >

1 <  src="build/webvr-manager.js"></ >

 1 //将在requestAnimation 中应用更新 2 this.update = function () { 3     if ( vrInput ) { 4         if ( vrInput.getPose ) { 5             //方法返回传感器在某一时刻的信息( )。例如包括时间戳、位置(x,y,z)、线速度、线加速度、角速度、角加速度、方向信息。 6             var pose = vrInput.getPose(); 7             //orientation 方向 8             if ( pose.orientation !== null ) { 9                 //quaternion  四元数10                 //把设备的方向复制给camera11                  .quaternion.fromArray( pose.orientation );12             }13             //位置信息14             if ( pose.position !== null ) {15                 //同样把设备的位置复制给camera16                  .position.fromArray( pose.position );17             } else {18                  .position.set( 0, 0, 0 );19             }20 21         } else {22             // Deprecated API.23             var state = vrInput.getState();24             if ( state.orientation !== null ) {25                  .quaternion.copy( state.orientation );26             }27             if ( state.position !== null ) {28                  .position.copy( state.position );29             } else {30                  .position.set( 0, 0, 0 );31             }32         }33 34         //TODO 此块会一直执行35         if ( this.standing ) {36             //如果硬件返回场景信息，则应用硬件返回的数据来进行站姿转换37             if ( vrInput.stageParameters ) {38                  .updateMatrix();39                 //sittingToStandingTransform返回一个Matrix4,表示从坐姿到站姿的变换。40                 standingMatrix.fromArray(vrInput.stageParameters.sittingToStandingTransform);41                 //应用变换到camera。42                  .applyMatrix( standingMatrix );43             } else {44                 //如果vrInput不提供y高度信息的话使用userHeight作为高度45                  .position.setY(  .position.y + this.userHeight );46             }47 48         }49         //使用上面定义的this.scale来缩放camera的位置。50          .position.multiplyScalar( scope.scale );51     }52 };

 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/624812         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 }

1 var cameraL = new THREE.PerspectiveCamera();2 //左camera显示  1层（即当某个元素只出现在  1时，只有cameraL可见。）3 cameraL. s.enable( 1 );4 5 var cameraR = new THREE.PerspectiveCamera();6 cameraR. s.enable( 2 );

 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     //获得左右眼的FOV12     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  . s instead.' );24     scene = scene[ 0 ];25 }

 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 matrix30 31     var mobj = new THREE.Matrix4();32     var m = mobj.elements;33 34     // and with scale/offset info for normalized device coords35     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 }

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 );

 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: false24 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 own34   // 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 for39   // panoramas with nothing interesting above or below.40   // 仅关心左右角度变化，忽略上下和倾斜等。41   // YAW_ONLY: true, // Default: false.42 43   // Prevent the polyfill from initializing immediately. Requires the app44   // 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 improve53   // performance. Making this very small can lower the effective resolution of54   // your scene.55   //在VR显示模式下对WebVR推荐的屏幕比例进行缩放。在IOS下如果不为0.5会出现显示问题，查看56   //https://github.com/borismus/webvr-polyfill/pull/10657   BUFFER_SCALE: 0.5, // default: 1.058 59   // Allow VRDisplay.submit  to change gl bindings, which is more60   // efficient if the application code will re-bind it's resources on the61   // next   anyway.62   // Dirty bindings include: gl. BUFFER_BINDING, gl.CURRENT_PROGRAM,63   // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,64   // and gl.TEXTURE_BINDING_2D for texture unit 065   // Warning: enabling this might lead to rendering issues.66   //允许 VRDisplay.submit 使用脏矩形渲染。但是开启此特性可能会出现渲染问题。67   //DIRTY_SUBMIT_ _BINDINGS: true // default: false68 };

 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);

 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.BackSide16   });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 stage24   // parameters provided.25   //在高端的设备上，要考虑到设备提供的场景信息的更新。26   setupStage();27 }28 29 // Create 3D  s.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);