Merge pull request #17022 from Mugen87/dev34

JSM: Added module and TS file for WebVR.

docs/manual/en/introduction/How-to-create-VR-content.html

@@ -25,7 +25,7 @@
 	</p>
 
 	<code>
-&lt;script src="/path/to/WebVR.js"&gt;&lt;/script&gt;
+import { WEBVR } from 'three/examples/jsm/vr/WebVR.js';
 	</code>
 
 	<p>

docs/manual/zh/introduction/How-to-create-VR-content.html

@@ -24,7 +24,7 @@
 	</p>
 
 	<code>
-&lt;script src="/path/to/WebVR.js"&gt;&lt;/script&gt;
+import { WEBVR } from 'three/examples/jsm/vr/WebVR.js';
 	</code>
 
 	<p>*WEBVR.createButton()*做了两件重要的事情：首先，它创建了一个按钮，指示了VR的兼容性；

editor/js/Menubar.View.js

@@ -23,15 +23,7 @@ Menubar.View = function ( editor ) {
 	option.setTextContent( 'VR mode' );
 	option.onClick( function () {
 
-		if ( WEBVR.isAvailable() === true ) {
-
-			editor.signals.enterVR.dispatch();
-
-		} else {
-
-			alert( 'WebVR not available' );
-
-		}
+		editor.signals.enterVR.dispatch();
 
 	} );
 	options.add( option );

editor/js/libs/app.js

@@ -112,7 +112,7 @@ var APP = {
 
 			if ( renderer.vr.enabled ) {
 
-				dom.appendChild( WEBVR.createButton( renderer ) );
+				dom.appendChild( THREE.WEBVR.createButton( renderer ) );
 
 			}
 

examples/js/vr/WebVR.js

@@ -5,7 +5,7 @@
  * Based on @tojiro's vr-samples-utils.js
  */
 
-var WEBVR = {
+THREE.WEBVR = {
 
 	createButton: function ( renderer, options ) {
 
@@ -25,8 +25,17 @@ var WEBVR = {
 
 			button.textContent = 'ENTER VR';
 
-			button.onmouseenter = function () { button.style.opacity = '1.0'; };
-			button.onmouseleave = function () { button.style.opacity = '0.5'; };
+			button.onmouseenter = function () {
+
+				button.style.opacity = '1.0';
+
+			};
+
+			button.onmouseleave = function () {
+
+				button.style.opacity = '0.5';
+
+			};
 
 			button.onclick = function () {
 
@@ -38,7 +47,7 @@ var WEBVR = {
 
 		}
 
-		function showEnterXR( device ) {
+		function showEnterXR( /*device*/ ) {
 
 			var currentSession = null;
 
@@ -53,7 +62,7 @@ var WEBVR = {
 
 			}
 
-			function onSessionEnded( event ) {
+			function onSessionEnded( /*event*/ ) {
 
 				currentSession.removeEventListener( 'end', onSessionEnded );
 
@@ -74,8 +83,17 @@ var WEBVR = {
 
 			button.textContent = 'ENTER XR';
 
-			button.onmouseenter = function () { button.style.opacity = '1.0'; };
-			button.onmouseleave = function () { button.style.opacity = '0.5'; };
+			button.onmouseenter = function () {
+
+				button.style.opacity = '1.0';
+
+			};
+
+			button.onmouseleave = function () {
+
+				button.style.opacity = '0.5';
+
+			};
 
 			button.onclick = function () {
 
@@ -167,7 +185,7 @@ var WEBVR = {
 
 			}, false );
 
-			window.addEventListener( 'vrdisplaydisconnect', function ( event ) {
+			window.addEventListener( 'vrdisplaydisconnect', function ( /*event*/ ) {
 
 				showVRNotFound();
 

examples/jsm/vr/WebVR.d.ts

+import {
+  WebGLRenderer
+} from '../../../src/Three';
+
+export interface WEBVROptions {
+  referenceSpaceType: string;
+}
+
+export namespace WEBVR {
+  export function createButton(renderer: WebGLRenderer, options: WEBVROptions);
+}

examples/jsm/vr/WebVR.js

+/**
+ * @author mrdoob / http://mrdoob.com
+ * @author Mugen87 / https://github.com/Mugen87
+ *
+ * Based on @tojiro's vr-samples-utils.js
+ */
+
+
+
+var WEBVR = {
+
+	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 XR';
+
+				currentSession = session;
+
+			}
+
+			function onSessionEnded( /*event*/ ) {
+
+				currentSession.removeEventListener( 'end', onSessionEnded );
+
+				renderer.vr.setSession( null );
+				button.textContent = 'ENTER XR';
+
+				currentSession = null;
+
+			}
+
+			//
+
+			button.style.display = '';
+
+			button.style.cursor = 'pointer';
+			button.style.left = 'calc(50% - 50px)';
+			button.style.width = '100px';
+
+			button.textContent = 'ENTER XR';
+
+			button.onmouseenter = function () {
+
+				button.style.opacity = '1.0';
+
+			};
+
+			button.onmouseleave = function () {
+
+				button.style.opacity = '0.5';
+
+			};
+
+			button.onclick = function () {
+
+				if ( currentSession === null ) {
+
+					navigator.xr.requestSession( 'immersive-vr' ).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 = 'XR 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 && 'supportsSession' in navigator.xr ) {
+
+			var button = document.createElement( 'button' );
+			button.style.display = 'none';
+
+			stylizeElement( button );
+
+			navigator.xr.supportsSession( 'immersive-vr' ).then( showEnterXR ).catch( 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://webvr.info';
+			message.innerHTML = 'WEBVR NOT SUPPORTED';
+
+			message.style.left = 'calc(50% - 90px)';
+			message.style.width = '180px';
+			message.style.textDecoration = 'none';
+
+			stylizeElement( message );
+
+			return message;
+
+		}
+
+	}
+
+};
+
+export { WEBVR };

examples/webvr_ballshooter.html

@@ -13,13 +13,13 @@
 		</div>
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
-		<script src="js/vr/WebVR.js"></script>
 
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
 
 			import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
+			import { WEBVR } from './jsm/vr/WebVR.js';
 
 			var camera, scene, renderer;
 			var controller1, controller2;

examples/webvr_cubes.html

@@ -13,13 +13,13 @@
 		</div>
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
-		<script src="js/vr/WebVR.js"></script>
 
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
 
 			import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
+			import { WEBVR } from './jsm/vr/WebVR.js';
 
 			var clock = new THREE.Clock();
 

examples/webvr_dragging.html

@@ -13,11 +13,11 @@
 		</div>
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
-		<script src="js/vr/WebVR.js"></script>
 
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
+			import { WEBVR } from './jsm/vr/WebVR.js';
 
 			var container;
 			var camera, scene, renderer;

examples/webvr_lorenzattractor.html

@@ -9,11 +9,11 @@
 	<body>
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
-		<script src="js/vr/WebVR.js"></script>
 
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
+			import { WEBVR } from './jsm/vr/WebVR.js';
 
 			var camera, scene, renderer;
 			var attractor, light;

examples/webvr_paint.html

@@ -13,11 +13,11 @@
 		</div>
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
-		<script src="js/vr/WebVR.js"></script>
 
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
+			import { WEBVR } from './jsm/vr/WebVR.js';
 
 			var container;
 			var camera, scene, renderer;

examples/webvr_panorama.html

@@ -8,11 +8,11 @@
 	</head>
 	<body>
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
-		<script src="js/vr/WebVR.js"></script>
 
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
+			import { WEBVR } from './jsm/vr/WebVR.js';
 
 			var camera;
 			var renderer;

examples/webvr_rollercoaster.html

@@ -9,13 +9,13 @@
 	<body>
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
-		<script src="js/vr/WebVR.js"></script>
 
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
 
 			import { RollerCoasterGeometry, RollerCoasterShadowGeometry, RollerCoasterLiftersGeometry, TreesGeometry, SkyGeometry } from './jsm/misc/RollerCoaster.js';
+			import { WEBVR } from './jsm/vr/WebVR.js';
 
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );

examples/webvr_sandbox.html

@@ -9,7 +9,6 @@
 	<body>
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
-		<script src="js/vr/WebVR.js"></script>
 
 		<script type="module">
 
@@ -17,6 +16,7 @@
 
 			import { Lensflare, LensflareElement } from './jsm/objects/Lensflare.js';
 			import { Reflector } from './jsm/objects/Reflector.js';
+			import { WEBVR } from './jsm/vr/WebVR.js';
 
 			var camera, scene, renderer;
 

examples/webvr_sculpt.html

@@ -13,13 +13,13 @@
 		</div>
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
-		<script src="js/vr/WebVR.js"></script>
 
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
 
 			import { MarchingCubes } from './jsm/objects/MarchingCubes.js';
+			import { WEBVR } from './jsm/vr/WebVR.js';
 
 			var container;
 			var camera, scene, renderer;

examples/webvr_video.html

@@ -15,7 +15,6 @@
 		</div>
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
-		<script src="js/vr/WebVR.js"></script>
 
 		<video id="video" loop muted crossOrigin="anonymous" webkit-playsinline style="display:none">
 			<source src="textures/MaryOculus.webm">
@@ -25,6 +24,7 @@
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
+			import { WEBVR } from './jsm/vr/WebVR.js';
 
 			var camera, scene, renderer;
 

examples/webvr_vive_paint.html

@@ -13,7 +13,6 @@
 		</div>
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
-		<script src="js/vr/WebVR.js"></script>
 
 		<script type="module">
 
@@ -21,6 +20,7 @@
 
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			import { PaintViveController } from './jsm/vr/PaintViveController.js';
+			import { WEBVR } from './jsm/vr/WebVR.js';
 
 			var container;
 			var camera, scene, renderer;

examples/webvr_vive_sculpt.html

@@ -13,7 +13,6 @@
 		</div>
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
-		<script src="js/vr/WebVR.js"></script>
 
 		<script type="module">
 
@@ -22,6 +21,7 @@
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			import { MarchingCubes } from './jsm/objects/MarchingCubes.js';
 			import { ViveController } from './jsm/vr/ViveController.js';
+			import { WEBVR } from './jsm/vr/WebVR.js';
 
 			var container;
 			var camera, scene, renderer;

utils/modularize.js

@@ -254,6 +254,7 @@ var files = [
 	{ path: 'vr/deprecated/GearVRController.js', dependencies: [], ignoreList: [] },
 	{ path: 'vr/PaintViveController.js', dependencies: [ { name: 'ViveController', path: 'vr/ViveController.js' } ], ignoreList: [] },
 	{ path: 'vr/ViveController.js', dependencies: [], ignoreList: [] },
+	{ path: 'vr/WebVR.js', dependencies: [], ignoreList: [] },
 
 	{ path: 'WebGL.js', dependencies: [], ignoreList: [] },
 ];