Examples: Deprecated WebVR.js and added VRButton.js

examples/js/vr/WebVR.js

@@ -9,6 +9,8 @@ THREE.WEBVR = {
 
 	createButton: function ( renderer, options ) {
 
+		console.warn( 'WEBVR.js has been deprecated. Use VRButton.js instead.' );
+
 		if ( options && options.referenceSpaceType ) {
 
 			renderer.vr.setReferenceSpaceType( options.referenceSpaceType );

examples/jsm/vr/WebVR.js

@@ -11,6 +11,8 @@ var WEBVR = {
 
 	createButton: function ( renderer, options ) {
 
+		console.warn( 'WEBVR.js has been deprecated. Use VRButton.js instead.' );
+
 		if ( options && options.referenceSpaceType ) {
 
 			renderer.vr.setReferenceSpaceType( options.referenceSpaceType );

examples/jsm/webxr/VRButton.js

+/**
+ * @author mrdoob / http://mrdoob.com
+ * @author Mugen87 / https://github.com/Mugen87
+ */
+
+var VRButton = {
+
+	createButton: function ( renderer, options ) {
+
+		if ( options && options.referenceSpaceType ) {
+
+			renderer.vr.setReferenceSpaceType( options.referenceSpaceType );
+
+		}
+
+		function showEnterVR( device ) {
+
+			button.style.display = '';
+
+			button.style.cursor = 'pointer';
+			button.style.left = 'calc(50% - 50px)';
+			button.style.width = '100px';
+
+			button.textContent = 'ENTER_VR';
+
+			button.onmouseenter = function () {
+
+				button.style.opacity = '1.0';
+
+			};
+
+			button.onmouseleave = function () {
+
+				button.style.opacity = '0.5';
+
+			};
+
+			button.onclick = function () {
+
+				device.isPresenting ? device.exitPresent() : device.requestPresent( [ { source: renderer.domElement } ] );
+
+			};
+
+			renderer.vr.setDevice( device );
+
+		}
+
+		function showEnterXR( /*device*/ ) {
+
+			var currentSession = null;
+
+			function onSessionStarted( session ) {
+
+				session.addEventListener( 'end', onSessionEnded );
+
+				renderer.vr.setSession( session );
+				button.textContent = 'EXIT VR';
+
+				currentSession = session;
+
+			}
+
+			function onSessionEnded( /*event*/ ) {
+
+				currentSession.removeEventListener( 'end', onSessionEnded );
+
+				renderer.vr.setSession( null );
+				button.textContent = 'ENTER VR';
+
+				currentSession = null;
+
+			}
+
+			//
+
+			button.style.display = '';
+
+			button.style.cursor = 'pointer';
+			button.style.left = 'calc(50% - 50px)';
+			button.style.width = '100px';
+
+			button.textContent = 'ENTER VR';
+
+			button.onmouseenter = function () {
+
+				button.style.opacity = '1.0';
+
+			};
+
+			button.onmouseleave = function () {
+
+				button.style.opacity = '0.5';
+
+			};
+
+			button.onclick = function () {
+
+				if ( currentSession === null ) {
+
+					// WebXR's requestReferenceSpace only works if the corresponding feature
+					// was requested at session creation time. For simplicity, just ask for
+					// the interesting ones as optional features, but be aware that the
+					// requestReferenceSpace call will fail if it turns out to be unavailable.
+					// ('local' is always available for immersive sessions and doesn't need to
+					// be requested separately.)
+
+					var sessionInit = { optionalFeatures: [ 'local-floor', 'bounded-floor' ] };
+					navigator.xr.requestSession( 'immersive-vr', sessionInit ).then( onSessionStarted );
+
+				} else {
+
+					currentSession.end();
+
+				}
+
+			};
+
+		}
+
+		function disableButton() {
+
+			button.style.display = '';
+
+			button.style.cursor = 'auto';
+			button.style.left = 'calc(50% - 75px)';
+			button.style.width = '150px';
+
+			button.onmouseenter = null;
+			button.onmouseleave = null;
+
+			button.onclick = null;
+
+		}
+
+		function showVRNotFound() {
+
+			disableButton();
+
+			button.textContent = 'VR NOT FOUND';
+
+			renderer.vr.setDevice( null );
+
+		}
+
+		function showXRNotFound() {
+
+			disableButton();
+
+			button.textContent = 'VR NOT FOUND';
+
+		}
+
+		function stylizeElement( element ) {
+
+			element.style.position = 'absolute';
+			element.style.bottom = '20px';
+			element.style.padding = '12px 6px';
+			element.style.border = '1px solid #fff';
+			element.style.borderRadius = '4px';
+			element.style.background = 'rgba(0,0,0,0.1)';
+			element.style.color = '#fff';
+			element.style.font = 'normal 13px sans-serif';
+			element.style.textAlign = 'center';
+			element.style.opacity = '0.5';
+			element.style.outline = 'none';
+			element.style.zIndex = '999';
+
+		}
+
+		if ( 'xr' in navigator ) {
+
+			var button = document.createElement( 'button' );
+			button.style.display = 'none';
+
+			stylizeElement( button );
+
+			navigator.xr.isSessionSupported( 'immersive-vr' ).then( function ( supported ) {
+
+				if ( supported ) {
+
+					showEnterXR();
+
+				} else {
+
+					showXRNotFound();
+
+				}
+
+			} );
+
+			return button;
+
+		} else if ( 'getVRDisplays' in navigator ) {
+
+			var button = document.createElement( 'button' );
+			button.style.display = 'none';
+
+			stylizeElement( button );
+
+			window.addEventListener( 'vrdisplayconnect', function ( event ) {
+
+				showEnterVR( event.display );
+
+			}, false );
+
+			window.addEventListener( 'vrdisplaydisconnect', function ( /*event*/ ) {
+
+				showVRNotFound();
+
+			}, false );
+
+			window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
+
+				button.textContent = event.display.isPresenting ? 'EXIT_VR' : 'ENTER_VR';
+
+			}, false );
+
+			window.addEventListener( 'vrdisplayactivate', function ( event ) {
+
+				event.display.requestPresent( [ { source: renderer.domElement } ] );
+
+			}, false );
+
+			navigator.getVRDisplays()
+				.then( function ( displays ) {
+
+					if ( displays.length > 0 ) {
+
+						showEnterVR( displays[ 0 ] );
+
+					} else {
+
+						showVRNotFound();
+
+					}
+
+				} ).catch( showVRNotFound );
+
+			return button;
+
+		} else {
+
+			var message = document.createElement( 'a' );
+			message.href = 'https://immersive-web.github.io/webxr/';
+			message.innerHTML = 'WEBXR NOT SUPPORTED';
+
+			message.style.left = 'calc(50% - 90px)';
+			message.style.width = '180px';
+			message.style.textDecoration = 'none';
+
+			stylizeElement( message );
+
+			return message;
+
+		}
+
+	}
+
+};
+
+export { VRButton };

examples/webxr_vr_ballshooter.html

@@ -21,7 +21,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
-			import { WEBVR } from './jsm/vr/WebVR.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
 
 			var camera, scene, renderer;
 			var controller1, controller2;
@@ -86,7 +86,7 @@
 
 				//
 
-				document.body.appendChild( WEBVR.createButton( renderer ) );
+				document.body.appendChild( VRButton.createButton( renderer ) );
 
 				// controllers
 

examples/webxr_vr_cubes.html

@@ -21,7 +21,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
-			import { WEBVR } from './jsm/vr/WebVR.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
 
 			var clock = new THREE.Clock();
 
@@ -120,7 +120,7 @@
 				window.addEventListener( 'vrdisplaypointerrestricted', onPointerRestricted, false );
 				window.addEventListener( 'vrdisplaypointerunrestricted', onPointerUnrestricted, false );
 
-				document.body.appendChild( WEBVR.createButton( renderer ) );
+				document.body.appendChild( VRButton.createButton( renderer ) );
 
 			}
 

examples/webxr_vr_dragging.html

@@ -19,7 +19,7 @@
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
-			import { WEBVR } from './jsm/vr/WebVR.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
 
 			var container;
 			var camera, scene, renderer;
@@ -117,7 +117,7 @@
 				renderer.vr.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				document.body.appendChild( WEBVR.createButton( renderer ) );
+				document.body.appendChild( VRButton.createButton( renderer ) );
 
 				// controllers
 

examples/webxr_vr_lorenzattractor.html

@@ -15,7 +15,7 @@
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
-			import { WEBVR } from './jsm/vr/WebVR.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
 
 			var camera, scene, renderer;
 			var attractor, light;
@@ -136,7 +136,7 @@
 				renderer.vr.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
-				document.body.appendChild( WEBVR.createButton( renderer ) );
+				document.body.appendChild( VRButton.createButton( renderer ) );
 
 				//
 

examples/webxr_vr_multiview.html

@@ -24,7 +24,7 @@
 
 			import * as THREE from '../build/three.module.js';
 			import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
-			import { WEBVR } from './jsm/vr/WebVR.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
 			import Stats from './jsm/libs/stats.module.js';
 
 			var container;
@@ -116,7 +116,7 @@
 
 				//
 
-				document.body.appendChild( WEBVR.createButton( renderer ) );
+				document.body.appendChild( VRButton.createButton( renderer ) );
 
 				//
 

examples/webxr_vr_paint.html

@@ -21,7 +21,7 @@
 			import * as THREE from '../build/three.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { TubePainter } from './jsm/misc/TubePainter.js';
-			import { WEBVR } from './jsm/vr/WebVR.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
 
 			var container;
 			var camera, scene, renderer;
@@ -95,7 +95,7 @@
 				renderer.vr.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				document.body.appendChild( WEBVR.createButton( renderer ) );
+				document.body.appendChild( VRButton.createButton( renderer ) );
 
 				// controllers
 

examples/webxr_vr_panorama.html

@@ -14,7 +14,7 @@
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
-			import { WEBVR } from './jsm/vr/WebVR.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
 
 			var camera;
 			var renderer;
@@ -31,7 +31,7 @@
 				renderer.vr.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
-				document.body.appendChild( WEBVR.createButton( renderer, { referenceSpaceType: 'local' } ) );
+				document.body.appendChild( VRButton.createButton( renderer, { referenceSpaceType: 'local' } ) );
 
 				//
 

examples/webxr_vr_panorama_depth.html

@@ -21,7 +21,7 @@
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
-			import { WEBVR } from './jsm/vr/WebVR.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
 
 			var camera, scene, renderer, sphere, clock;
 
@@ -90,7 +90,7 @@
 				renderer.vr.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				document.body.appendChild( WEBVR.createButton( renderer, { referenceSpaceType: 'local' } ) );
+				document.body.appendChild( VRButton.createButton( renderer, { referenceSpaceType: 'local' } ) );
 
 				//
 

examples/webxr_vr_rollercoaster.html

@@ -23,7 +23,7 @@
 				TreesGeometry,
 				SkyGeometry
 			} from './jsm/misc/RollerCoaster.js';
-			import { WEBVR } from './jsm/vr/WebVR.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
 
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
@@ -31,7 +31,7 @@
 			renderer.vr.enabled = true;
 			document.body.appendChild( renderer.domElement );
 
-			document.body.appendChild( WEBVR.createButton( renderer, { referenceSpaceType: 'local' } ) );
+			document.body.appendChild( VRButton.createButton( renderer, { referenceSpaceType: 'local' } ) );
 
 			//
 

examples/webxr_vr_sandbox.html

@@ -18,7 +18,7 @@
 
 			import { Lensflare, LensflareElement } from './jsm/objects/Lensflare.js';
 			import { Reflector } from './jsm/objects/Reflector.js';
-			import { WEBVR } from './jsm/vr/WebVR.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
 
 			var camera, scene, renderer;
 
@@ -125,7 +125,7 @@
 				renderer.vr.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
-				document.body.appendChild( WEBVR.createButton( renderer ) );
+				document.body.appendChild( VRButton.createButton( renderer ) );
 
 				//
 

examples/webxr_vr_sculpt.html

@@ -21,7 +21,7 @@
 			import * as THREE from '../build/three.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { MarchingCubes } from './jsm/objects/MarchingCubes.js';
-			import { WEBVR } from './jsm/vr/WebVR.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
 
 			var container;
 			var camera, scene, renderer;
@@ -91,7 +91,7 @@
 				renderer.vr.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				document.body.appendChild( WEBVR.createButton( renderer ) );
+				document.body.appendChild( VRButton.createButton( renderer ) );
 
 				// controllers
 

examples/webxr_vr_video.html

@@ -26,7 +26,7 @@
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
-			import { WEBVR } from './jsm/vr/WebVR.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
 
 			var camera, scene, renderer;
 
@@ -119,7 +119,7 @@
 				renderer.vr.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				document.body.appendChild( WEBVR.createButton( renderer, { referenceSpaceType: 'local' } ) );
+				document.body.appendChild( VRButton.createButton( renderer, { referenceSpaceType: 'local' } ) );
 
 				//