WebVR: Implemented Exit VR. See mrdoob#8565

mrdoob · mrdoob · commit 2590f6e05e01 · 2016-06-14T13:16:38.000-07:00
diff --git a/examples/js/WebVR.js b/examples/js/WebVR.js
@@ -72,8 +72,9 @@ var WEBVR = {
 
 		var button = document.createElement( 'button' );
 		button.style.position = 'absolute';
-		button.style.left = 'calc(50% - 30px)';
+		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';
@@ -82,14 +83,21 @@ var WEBVR = {
 		button.style.fontFamily = 'sans-serif';
 		button.style.fontSize = '13px';
 		button.style.fontStyle = 'normal';
+		button.style.textAlign = 'center';
 		button.style.zIndex = '999';
 		button.textContent = 'ENTER VR';
 		button.onclick = function() {
 
-			effect.setFullScreen( true );
+			effect.isPresenting ? effect.exitPresent() : effect.requestPresent();
 
 		};
 
+		window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
+
+			button.textContent = effect.isPresenting ? 'EXIT VR' : 'ENTER VR';
+
+		}, false );
+
 		return button;
 
 	}
diff --git a/examples/js/effects/VREffect.js b/examples/js/effects/VREffect.js
@@ -59,9 +59,10 @@ THREE.VREffect = function ( renderer, onError ) {
 
 	//
 
+	this.isPresenting = false;
 	this.scale = 1;
 
-	var isPresenting = false;
+	var scope = this;
 
 	var rendererSize = renderer.getSize();
 	var rendererPixelRatio = renderer.getPixelRatio();
@@ -70,7 +71,7 @@ THREE.VREffect = function ( renderer, onError ) {
 
 		rendererSize = { width: width, height: height };
 
-		if ( isPresenting ) {
+		if ( scope.isPresenting ) {
 
 			var eyeParamsL = vrHMD.getEyeParameters( 'left' );
 			renderer.setPixelRatio( 1 );
@@ -104,16 +105,16 @@ THREE.VREffect = function ( renderer, onError ) {
 
 	function onFullscreenChange () {
 
-		var wasPresenting = isPresenting;
-		isPresenting = vrHMD !== undefined && ( vrHMD.isPresenting || ( isDeprecatedAPI && document[ fullscreenElement ] instanceof window.HTMLElement ) );
+		var wasPresenting = scope.isPresenting;
+		scope.isPresenting = vrHMD !== undefined && ( vrHMD.isPresenting || ( isDeprecatedAPI && document[ fullscreenElement ] instanceof window.HTMLElement ) );
 
-		if ( wasPresenting === isPresenting ) {
+		if ( wasPresenting === scope.isPresenting ) {
 
 			return;
 
 		}
 
-		if ( isPresenting ) {
+		if ( scope.isPresenting ) {
 
 			rendererPixelRatio = renderer.getPixelRatio();
 			rendererSize = renderer.getSize();
@@ -180,7 +181,8 @@ THREE.VREffect = function ( renderer, onError ) {
 				return;
 
 			}
-			if ( isPresenting === boolean ) {
+
+			if ( scope.isPresenting === boolean ) {
 
 				resolve();
 				return;
@@ -241,7 +243,7 @@ THREE.VREffect = function ( renderer, onError ) {
 
 	this.render = function ( scene, camera ) {
 
-		if ( vrHMD && isPresenting ) {
+		if ( vrHMD && scope.isPresenting ) {
 
 			var autoUpdate = scene.autoUpdate;
 
