Fix VREffect handling of full screen state (#8788)

- Use unprefixed Fullscreen API in `VREffect` if available #8568
- Prevent over-writing of backup value for pixel ratio #8776

examples/js/effects/VREffect.js

@@ -98,11 +98,19 @@ THREE.VREffect = function ( renderer, onError ) {
 	// fullscreen
 
 	var canvas = renderer.domElement;
-	var fullscreenchange = canvas.mozRequestFullScreen ? 'mozfullscreenchange' : 'webkitfullscreenchange';
+	var requestFullscreen;
+	var fullscreenElement;
 
-	document.addEventListener( fullscreenchange, function () {
+	function onFullscreenChange() {
 
-		isPresenting = vrHMD !== undefined && ( vrHMD.isPresenting || ( isDeprecatedAPI && ( document.mozFullScreenElement || document.webkitFullscreenElement ) !== undefined ) );
+		var wasPresenting = isPresenting;
+		isPresenting = vrHMD !== undefined && ( vrHMD.isPresenting || ( isDeprecatedAPI && document[fullscreenElement] instanceof window.HTMLElement ) );
+
+		if ( wasPresenting === isPresenting ) {
+
+			return;
+
+		}
 
 		if ( isPresenting ) {
 
@@ -134,29 +142,29 @@ THREE.VREffect = function ( renderer, onError ) {
 
 		}
 
-	}, false );
-
-	window.addEventListener( 'vrdisplaypresentchange', function () {
+	}
 
-		isPresenting = vrHMD && vrHMD.isPresenting;
+	if ( canvas.requestFullscreen ) {
 
-		if ( isPresenting ) {
+		requestFullscreen = 'requestFullscreen';
+		fullscreenElement = 'fullscreenElement';
 
-			rendererPixelRatio = renderer.getPixelRatio();
-			rendererSize = renderer.getSize();
+	} else if ( canvas.mozRequestFullScreen ) {
 
-			var eyeParamsL = vrHMD.getEyeParameters( 'left' );
-			renderer.setPixelRatio( 1 );
-			renderer.setSize( eyeParamsL.renderWidth * 2, eyeParamsL.renderHeight, false );
+		requestFullscreen = 'mozRequestFullScreen';
+		fullscreenElement = 'mozFullScreenElement'
+		document.addEventListener( 'mozfullscreenchange', onFullscreenChange, false );
 
-		} else {
+	} else {
 
-			renderer.setPixelRatio( rendererPixelRatio );
-			renderer.setSize( rendererSize.width, rendererSize.height );
+		requestFullscreen = 'webkitRequestFullscreen';
+		fullscreenElement = 'webkitFullscreenElement';
+		document.addEventListener( 'webkitfullscreenchange', onFullscreenChange, false );
 
-		}
+	}
 
-	}, false );
+	document.addEventListener( 'fullscreenchange', onFullscreenChange, false );
+	window.addEventListener( 'vrdisplaypresentchange', onFullscreenChange, false );
 
 	this.setFullScreen = function ( boolean ) {
 
@@ -189,14 +197,9 @@ THREE.VREffect = function ( renderer, onError ) {
 
 			} else {
 
-				if ( canvas.mozRequestFullScreen ) {
-
-					canvas.mozRequestFullScreen( { vrDisplay: vrHMD } );
-					resolve();
-
-				} else if ( canvas.webkitRequestFullscreen ) {
+				if ( canvas[requestFullscreen] ) {
 
-					canvas.webkitRequestFullscreen( { vrDisplay: vrHMD } );
+					canvas[requestFullscreen]( { vrDisplay: vrHMD } );
 					resolve();
 
 				} else {