WEBVR.getButton() now expects VRDisplay.

examples/files.js

@@ -286,6 +286,7 @@ var files = {
 		"webvr_video",
 		"webvr_vive",
 		"webvr_vive_dragging",
+		"webvr_vive_camerarig",
 		"webvr_vive_paint",
 		"webvr_vive_sculpt"
 	],

examples/js/vr/WebVR.js

@@ -24,12 +24,7 @@ var WEBVR = {
 
 			navigator.getVRDisplays()
 				.then( function ( displays ) {
-
 					onDisplay( displays[ 0 ] );
-
-				} )
-				.catch( function () {
-					// no displays
 				} );
 
 		}
@@ -83,12 +78,20 @@ var WEBVR = {
 
 	},
 
-	getButton: function ( effect, canvas ) {
+	getButton: function ( display, canvas ) {
+
+		if ( display instanceof VRDisplay === false ) {
+
+			console.error( 'WebVR.getButton() now expects a VRDisplay.' );
+			return document.createElement( 'button' );
+
+		}
 
 		var button = document.createElement( 'button' );
 		button.style.position = 'absolute';
 		button.style.left = 'calc(50% - 50px)';
 		button.style.bottom = '20px';
+		button.style.width = '100px';
 		button.style.border = '0';
 		button.style.padding = '8px';
 		button.style.cursor = 'pointer';
@@ -100,18 +103,18 @@ var WEBVR = {
 		button.style.textAlign = 'center';
 		button.style.zIndex = '999';
 
-		if ( effect.getVRDisplay() ) {
+		if ( display ) {
 
 			button.textContent = 'ENTER VR';
 			button.onclick = function () {
 
-				effect.isPresenting ? effect.exitPresent() : effect.requestPresent( [ { source: canvas } ] );
+				display.isPresenting ? display.exitPresent() : display.requestPresent( [ { source: canvas } ] );
 
 			};
 
 			window.addEventListener( 'vrdisplaypresentchange', function () {
 
-				button.textContent = effect.isPresenting ? 'EXIT VR' : 'ENTER VR';
+				button.textContent = display.isPresenting ? 'EXIT VR' : 'ENTER VR';
 
 			}, false );
 

examples/webvr_cubes.html

@@ -132,20 +132,11 @@
 				controls = new THREE.VRControls( camera );
 				effect = new THREE.VREffect( renderer );
 
-				if ( navigator.getVRDisplays ) {
+				WEBVR.getVRDisplay( function ( display ) {
 
-					navigator.getVRDisplays()
-						.then( function ( displays ) {
-							effect.setVRDisplay( displays[ 0 ] );
-							controls.setVRDisplay( displays[ 0 ] );
-						} )
-						.catch( function () {
-							// no displays
-						} );
+					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
-					document.body.appendChild( WEBVR.getButton( effect ) );
-
-				}
+				} );
 
 				renderer.domElement.addEventListener( 'mousedown', onMouseDown, false );
 				renderer.domElement.addEventListener( 'mouseup', onMouseUp, false );

examples/webvr_panorama.html

@@ -56,11 +56,11 @@
 			controls = new THREE.VRControls( camera );
 			effect = new THREE.VREffect( renderer );
 
-			if ( WEBVR.isAvailable() === true ) {
+			WEBVR.getVRDisplay( function ( display ) {
 
-				document.body.appendChild( WEBVR.getButton( effect ) );
+				document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
-			}
+			} );
 
 			var textures = getTexturesFromAtlasFile( "textures/cube/sun_temple_stripe_stereo.jpg", 12 );
 

examples/webvr_rollercoaster.html

@@ -190,11 +190,11 @@
 			var controls = new THREE.VRControls( camera );
 			var effect = new THREE.VREffect( renderer );
 
-			if ( WEBVR.isAvailable() === true ) {
+			WEBVR.getVRDisplay( function ( display ) {
 
-				document.body.appendChild( WEBVR.getButton( effect ) );
+				document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
-			}
+			} );
 
 			//
 

examples/webvr_shadow.html

@@ -119,11 +119,11 @@
 				controls = new THREE.VRControls( camera );
 				effect = new THREE.VREffect( renderer );
 
-				if ( WEBVR.isAvailable() === true ) {
+				WEBVR.getVRDisplay( function ( display ) {
 
-					document.body.appendChild( WEBVR.getButton( effect ) );
+					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
-				}
+				} );
 
 				//
 

examples/webvr_video.html

@@ -150,11 +150,11 @@
 				effect.scale = 0; // video doesn't need eye separation
 				effect.setSize( window.innerWidth, window.innerHeight );
 
-				if ( WEBVR.isAvailable() === true ) {
+				WEBVR.getVRDisplay( function ( display ) {
 
-					document.body.appendChild( WEBVR.getButton( effect ) );
+					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
-				}
+				} );
 
 
 				//

examples/webvr_vive.html

@@ -196,11 +196,11 @@
 
 				effect = new THREE.VREffect( renderer );
 
-				if ( WEBVR.isAvailable() === true ) {
+				WEBVR.getVRDisplay( function ( display ) {
 
-					document.body.appendChild( WEBVR.getButton( effect ) );
+					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
-				}
+				} );
 
 				//
 

examples/webvr_vive_camerarig.html

@@ -209,11 +209,11 @@
 
 				effect = new THREE.VREffect( renderer );
 
-				if ( WEBVR.isAvailable() === true ) {
+				WEBVR.getVRDisplay( function ( display ) {
 
-					document.body.appendChild( WEBVR.getButton( effect ) );
+					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
-				}
+				} );
 
 				//
 

examples/webvr_vive_dragging.html

@@ -195,11 +195,11 @@
 
 				effect = new THREE.VREffect( renderer );
 
-				if ( WEBVR.isAvailable() === true ) {
+				WEBVR.getVRDisplay( function ( display ) {
 
-					document.body.appendChild( WEBVR.getButton( effect ) );
+					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
-				}
+				} );
 
 				//
 

examples/webvr_vive_paint.html

@@ -190,11 +190,11 @@
 
 				effect = new THREE.VREffect( renderer );
 
-				if ( WEBVR.isAvailable() === true ) {
+				WEBVR.getVRDisplay( function ( display ) {
 
-					document.body.appendChild( WEBVR.getButton( effect ) );
+					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
-				}
+				} );
 
 				//
 

examples/webvr_vive_sculpt.html

@@ -168,11 +168,11 @@
 
 				effect = new THREE.VREffect( renderer );
 
-				if ( WEBVR.isAvailable() === true ) {
+				WEBVR.getVRDisplay( function ( display ) {
 
-					document.body.appendChild( WEBVR.getButton( effect ) );
+					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
-				}
+				} );
 
 				//