WebVR: Better availability check

examples/js/vr/WebVR.js

@@ -1,20 +1,46 @@
 /**
  * @author mrdoob / http://mrdoob.com
+ * @author Mugen87 / https://github.com/Mugen87
+ *
  * Based on @tojiro's vr-samples-utils.js
  */
 
 var WEBVR = {
 
-	isLatestAvailable: function () {
+	isAvailable: function () {
 
-		console.warn( 'WEBVR: isLatestAvailable() is being deprecated. Use .isAvailable() instead.' );
-		return this.isAvailable();
+		console.warn( 'WEBVR: isAvailable() is being deprecated. Use .checkAvailability() instead.' );
+		return navigator.getVRDisplays !== undefined;
 
 	},
 
-	isAvailable: function () {
+	checkAvailability: function () {
 
-		return navigator.getVRDisplays !== undefined;
+		return new Promise( function( resolve, reject ) {
+
+			if ( navigator.getVRDisplays !== undefined ) {
+
+				navigator.getVRDisplays().then( function ( displays ) {
+
+					if ( displays.length === 0 ) {
+
+						reject( 'WebVR supported, but no VRDisplays found.' );
+
+					} else {
+
+						resolve();
+
+					}
+
+				} );
+
+			} else {
+
+				reject( 'Your browser does not support WebVR. See <a href="https://webvr.info">webvr.info</a> for assistance.' );
+
+			}
+
+		} );
 
 	},
 
@@ -33,6 +59,8 @@ var WEBVR = {
 
 	getMessage: function () {
 
+		console.warn( 'WEBVR: getMessage() is being deprecated. Use .getMessageContainer( message ) instead.' );
+
 		var message;
 
 		if ( navigator.getVRDisplays ) {
@@ -78,6 +106,33 @@ var WEBVR = {
 
 	},
 
+	getMessageContainer: function ( message ) {
+
+		var container = document.createElement( 'div' );
+		container.style.position = 'absolute';
+		container.style.left = '0';
+		container.style.top = '0';
+		container.style.right = '0';
+		container.style.zIndex = '999';
+		container.align = 'center';
+
+		var error = document.createElement( 'div' );
+		error.style.fontFamily = 'sans-serif';
+		error.style.fontSize = '16px';
+		error.style.fontStyle = 'normal';
+		error.style.lineHeight = '26px';
+		error.style.backgroundColor = '#fff';
+		error.style.color = '#000';
+		error.style.padding = '10px 20px';
+		error.style.margin = '50px';
+		error.style.display = 'inline-block';
+		error.innerHTML = message;
+		container.appendChild( error );
+
+		return container;
+
+	},
+
 	getButton: function ( display, canvas ) {
 
 		if ( 'VREffect' in THREE && display instanceof THREE.VREffect ) {

examples/webvr_cubes.html

@@ -29,11 +29,11 @@
 
 		<script>
 
-			if ( WEBVR.isAvailable() === false ) {
+			WEBVR.checkAvailability().catch( function( message ) {
 
-				document.body.appendChild( WEBVR.getMessage() );
+				document.body.appendChild( WEBVR.getMessageContainer( message ) );
 
-			}
+			} );
 
 			//
 

examples/webvr_daydream.html

@@ -29,11 +29,11 @@
 
 		<script>
 
-			if ( WEBVR.isAvailable() === false ) {
+			WEBVR.checkAvailability().catch( function( message ) {
 
-				document.body.appendChild( WEBVR.getMessage() );
+				document.body.appendChild( WEBVR.getMessageContainer( message ) );
 
-			}
+			} );
 
 			//
 

examples/webvr_panorama.html

@@ -25,11 +25,11 @@
 
 		<script>
 
-		if ( WEBVR.isAvailable() === false ) {
+		WEBVR.checkAvailability().catch( function( message ) {
 
-			document.body.appendChild( WEBVR.getMessage() );
+			document.body.appendChild( WEBVR.getMessageContainer( message ) );
 
-		}
+		} );
 
 		//
 

examples/webvr_rollercoaster.html

@@ -31,11 +31,11 @@
 
 		<script>
 
-			if ( WEBVR.isAvailable() === false ) {
+			WEBVR.checkAvailability().catch( function( message ) {
 
-				document.body.appendChild( WEBVR.getMessage() );
+				document.body.appendChild( WEBVR.getMessageContainer( message ) );
 
-			}
+			} );
 
 			//
 

examples/webvr_sandbox.html

@@ -25,11 +25,11 @@
 
 		<script>
 
-			if ( WEBVR.isAvailable() === false ) {
+			WEBVR.checkAvailability().catch( function( message ) {
 
-				document.body.appendChild( WEBVR.getMessage() );
+				document.body.appendChild( WEBVR.getMessageContainer( message ) );
 
-			}
+			} );
 
 			//
 

examples/webvr_video.html

@@ -40,11 +40,11 @@
 
 		<script>
 
-			if ( WEBVR.isAvailable() === false ) {
+			WEBVR.checkAvailability().catch( function( message ) {
 
-				document.body.appendChild( WEBVR.getMessage() );
+				document.body.appendChild( WEBVR.getMessageContainer( message ) );
 
-			}
+			} );
 
 			//
 

examples/webvr_vive.html

@@ -30,11 +30,11 @@
 
 		<script>
 
-			if ( WEBVR.isAvailable() === false ) {
+			WEBVR.checkAvailability().catch( function( message ) {
 
-				document.body.appendChild( WEBVR.getMessage() );
+				document.body.appendChild( WEBVR.getMessageContainer( message ) );
 
-			}
+			} );
 
 			//
 

examples/webvr_vive_camerarig.html

@@ -30,11 +30,11 @@
 
 		<script>
 
-			if ( WEBVR.isAvailable() === false ) {
+			WEBVR.checkAvailability().catch( function( message ) {
 
-				document.body.appendChild( WEBVR.getMessage() );
+				document.body.appendChild( WEBVR.getMessageContainer( message ) );
 
-			}
+			} );
 
 			//
 

examples/webvr_vive_dragging.html

@@ -30,11 +30,11 @@
 
 		<script>
 
-			if ( WEBVR.isAvailable() === false ) {
+			WEBVR.checkAvailability().catch( function( message ) {
 
-				document.body.appendChild( WEBVR.getMessage() );
+				document.body.appendChild( WEBVR.getMessageContainer( message ) );
 
-			}
+			} );
 
 			//
 

examples/webvr_vive_paint.html

@@ -31,11 +31,11 @@
 
 		<script>
 
-			if ( WEBVR.isAvailable() === false ) {
+			WEBVR.checkAvailability().catch( function( message ) {
 
-				document.body.appendChild( WEBVR.getMessage() );
+				document.body.appendChild( WEBVR.getMessageContainer( message ) );
 
-			}
+			} );
 
 			//
 

examples/webvr_vive_sculpt.html

@@ -31,11 +31,11 @@
 
 		<script>
 
-			if ( WEBVR.isAvailable() === false ) {
+			WEBVR.checkAvailability().catch( function( message ) {
 
-				document.body.appendChild( WEBVR.getMessage() );
+				document.body.appendChild( WEBVR.getMessageContainer( message ) );
 
-			}
+			} );
 
 			//