Decouple navigator.getVRDisplays from VREffect/VRControls (#9771)

* added listDisplays

* updated vreffect and cubes example

* updated controls

* merged getDisplays with listDisplays

* switched to setDisplay/getDisplay

* updated example

examples/js/controls/VRControls.js

@@ -7,7 +7,7 @@ THREE.VRControls = function ( object, onError ) {
 
 	var scope = this;
 
-	var vrDisplay, vrDisplays;
+	var vrDisplay;
 
 	var standingMatrix = new THREE.Matrix4();
 
@@ -16,28 +16,6 @@ THREE.VRControls = function ( object, onError ) {
 		frameData = new VRFrameData();
 	}
 
-	function gotVRDisplays( displays ) {
-
-		vrDisplays = displays;
-
-		if ( displays.length > 0 ) {
-
-			vrDisplay = displays[ 0 ];
-
-		} else {
-
-			if ( onError ) onError( 'VR input not available.' );
-
-		}
-
-	}
-
-	if ( navigator.getVRDisplays ) {
-
-		navigator.getVRDisplays().then( gotVRDisplays );
-
-	}
-
 	// the Rift SDK returns the position in meters
 	// this scale factor allows the user to define how meters
 	// are converted to scene units.
@@ -52,15 +30,15 @@ THREE.VRControls = function ( object, onError ) {
 	// standing=true but the VRDisplay doesn't provide stageParameters.
 	this.userHeight = 1.6;
 
-	this.getVRDisplay = function () {
+	this.setDisplay = function ( display ) {
 
-		return vrDisplay;
+		vrDisplay = display;
 
 	};
 
-	this.getVRDisplays = function () {
+	this.getDisplay = function () {
 
-		return vrDisplays;
+		return vrDisplay;
 
 	};
 

examples/js/effects/VREffect.js

@@ -9,9 +9,10 @@
  *
  */
 
-THREE.VREffect = function ( renderer, onError ) {
+THREE.VREffect = function ( renderer ) {
+
+	var vrDisplay;
 
-	var vrDisplay, vrDisplays;
 	var eyeTranslationL = new THREE.Vector3();
 	var eyeTranslationR = new THREE.Vector3();
 	var renderRectL, renderRectR;
@@ -23,28 +24,6 @@ THREE.VREffect = function ( renderer, onError ) {
 
 	}
 
-	function gotVRDisplays( displays ) {
-
-		vrDisplays = displays;
-
-		if ( displays.length > 0 ) {
-
-			vrDisplay = displays[ 0 ];
-
-		} else {
-
-			if ( onError ) onError( 'HMD not available' );
-
-		}
-
-	}
-
-	if ( navigator.getVRDisplays ) {
-
-		navigator.getVRDisplays().then( gotVRDisplays );
-
-	}
-
 	//
 
 	this.isPresenting = false;
@@ -56,15 +35,15 @@ THREE.VREffect = function ( renderer, onError ) {
 	var rendererUpdateStyle = false;
 	var rendererPixelRatio = renderer.getPixelRatio();
 
-	this.getVRDisplay = function () {
+	this.setDisplay = function ( display ) {
 
-		return vrDisplay;
+		vrDisplay = display;
 
 	};
 
-	this.getVRDisplays = function () {
+	this.getDisplay = function () {
 
-		return vrDisplays;
+		return vrDisplay;
 
 	};
 

examples/js/vr/WebVR.js

@@ -100,6 +100,12 @@ var WEBVR = {
 
 		return button;
 
+	},
+
+	getDisplays: function() {
+
+		return navigator.getVRDisplays();
+
 	}
 
 };

examples/webvr_cubes.html

@@ -130,11 +130,15 @@
 				controls = new THREE.VRControls( camera );
 				effect = new THREE.VREffect( renderer );
 
-				if ( WEBVR.isAvailable() === true ) {
-
-					document.body.appendChild( WEBVR.getButton( effect ) );
-
-				}
+				WEBVR.getDisplays()
+					.then( function( displays ) {
+						effect.setDisplay( displays[ 0 ] );
+						controls.setDisplay( displays[ 0 ] );
+						document.body.appendChild( WEBVR.getButton( effect ) );
+					} )
+					.catch( function() {
+						// no displays
+					} );
 
 				renderer.domElement.addEventListener( 'mousedown', onMouseDown, false );
 				renderer.domElement.addEventListener( 'mouseup', onMouseUp, false );