diff --git a/docs/manual/en/introduction/How-to-create-VR-content.html b/docs/manual/en/introduction/How-to-create-VR-content.html
index 71d297c46d4ae263c7ffcdb7e6373881a222121c..45231e99e9470b63e4a82fd3172eb19afa912d94 100644
--- a/docs/manual/en/introduction/How-to-create-VR-content.html
+++ b/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>
diff --git a/docs/manual/zh/introduction/How-to-create-VR-content.html b/docs/manual/zh/introduction/How-to-create-VR-content.html
index d14c0dd41304ba12d01ba89b23d03018a3daa551..123d3c7f77dddb7d1d431ae3f692c2fb3af0b1d2 100644
--- a/docs/manual/zh/introduction/How-to-create-VR-content.html
+++ b/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的兼容性；
diff --git a/editor/js/Menubar.View.js b/editor/js/Menubar.View.js
index 2acaa3fd07f2144b9f70f7c5c3e3cf19286b9f82..3cb905c6d4a7aeb7b94a80d03f0383b9c582053f 100644
--- a/editor/js/Menubar.View.js
+++ b/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 );
diff --git a/editor/js/libs/app.js b/editor/js/libs/app.js
index bbc4a06701ad9cb3847b5f418000a5c51572e8ce..1e379cf986eaf8743a83c36f3b1a399ff54175d3 100644
--- a/editor/js/libs/app.js
+++ b/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 ) );
 
 			}
 
diff --git a/examples/js/vr/WebVR.js b/examples/js/vr/WebVR.js
index 5edc49e3bc948d27a4d4a13ff1a0a9740c5bf898..076228143e0cf0c17b89cafe67d12685654f2217 100644
--- a/examples/js/vr/WebVR.js
+++ b/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();
 
diff --git a/examples/jsm/vr/WebVR.d.ts b/examples/jsm/vr/WebVR.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f888bc33cc784d2df916eaf440cc84bbb8a7080f
--- /dev/null
+++ b/examples/jsm/vr/WebVR.d.ts
@@ -0,0 +1,11 @@
+import {
+  WebGLRenderer
+} from '../../../src/Three';
+
+export interface WEBVROptions {
+  referenceSpaceType: string;
+}
+
+export namespace WEBVR {
+  export function createButton(renderer: WebGLRenderer, options: WEBVROptions);
+}
diff --git a/examples/jsm/vr/WebVR.js b/examples/jsm/vr/WebVR.js
new file mode 100644
index 0000000000000000000000000000000000000000..1b93855157bb5a0b98e91a7d4f0c9ea36910f780
--- /dev/null
+++ b/examples/jsm/vr/WebVR.js
@@ -0,0 +1,245 @@
+/**
+ * @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 };
diff --git a/examples/webvr_ballshooter.html b/examples/webvr_ballshooter.html
index 33f611d3e901e84a15e444b2824b64007460c560..c063fd1f01a26657b70ce3b3388dcb37a4585fa5 100644
--- a/examples/webvr_ballshooter.html
+++ b/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;
diff --git a/examples/webvr_cubes.html b/examples/webvr_cubes.html
index 8c97d305d7925cbb056f1ca46230972cc2383b03..fba7cf6256b44863c9a05ffbefb81f558464adda 100644
--- a/examples/webvr_cubes.html
+++ b/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();
 
diff --git a/examples/webvr_dragging.html b/examples/webvr_dragging.html
index 1370249c7a203e212a45e0d9ddf8cdfe5a66cb92..39d52dd3502ea0deb53b5456b8c243687b49bb2b 100644
--- a/examples/webvr_dragging.html
+++ b/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;
diff --git a/examples/webvr_lorenzattractor.html b/examples/webvr_lorenzattractor.html
index 74f66aacef29cab22cc68bc0a8a45cf189d59582..a443c414c394e48680e100ffb8b120c6c78ef569 100644
--- a/examples/webvr_lorenzattractor.html
+++ b/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;
diff --git a/examples/webvr_paint.html b/examples/webvr_paint.html
index d73141ec5f1e4d6f2805d1a17517cc5439d0d6d2..4f3fa0817165f3d53239ede0f2964212b3e80ed5 100644
--- a/examples/webvr_paint.html
+++ b/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;
diff --git a/examples/webvr_panorama.html b/examples/webvr_panorama.html
index 94e39440f7d9a3c3253dfa22dcf40268b895fcfb..e3ce8caa26c1a65f4b6b10353c253099fe85dd40 100644
--- a/examples/webvr_panorama.html
+++ b/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;
diff --git a/examples/webvr_rollercoaster.html b/examples/webvr_rollercoaster.html
index d638fb47e5c83b30ebd464b03c1cca1474ff0a72..f98d57f535dc73a22d23357f4991b8d258b2f880 100644
--- a/examples/webvr_rollercoaster.html
+++ b/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 );
diff --git a/examples/webvr_sandbox.html b/examples/webvr_sandbox.html
index e59b19c896edfef3a912081830d9e0c00cafe91b..d7044b3267fd6d21b6f60e6514951e5f9b3fb897 100644
--- a/examples/webvr_sandbox.html
+++ b/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;
 
diff --git a/examples/webvr_sculpt.html b/examples/webvr_sculpt.html
index 6e768cad9b0ab43520cf15f545b88c35339c15d3..9f186da8821398a601bdaf5491c0b6f2d68d503b 100644
--- a/examples/webvr_sculpt.html
+++ b/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;
diff --git a/examples/webvr_video.html b/examples/webvr_video.html
index 5576b424df1a7bb5709be835b7b98d639fee0342..a0840238fa5fbb876d2b9c4249f0b2523c966c40 100644
--- a/examples/webvr_video.html
+++ b/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;
 
diff --git a/examples/webvr_vive_paint.html b/examples/webvr_vive_paint.html
index 8152f73fc6b84e7599133171bac0021638cab28a..91dfee2bc2192abfa65f7487fa8ab3c5e65721ea 100644
--- a/examples/webvr_vive_paint.html
+++ b/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;
diff --git a/examples/webvr_vive_sculpt.html b/examples/webvr_vive_sculpt.html
index 43ae9cf2bd7b7fc7fcd8370e989d0bfc9f4470a9..4f17c833c960d8c9cc392aeabc39bdc44039cd83 100644
--- a/examples/webvr_vive_sculpt.html
+++ b/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;
diff --git a/utils/modularize.js b/utils/modularize.js
index 63d38996c4d01ab5128b7d66532bd4dee7c5c687..b2eb273829c4606e696f1a108f7197c5e00183d5 100644
--- a/utils/modularize.js
+++ b/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: [] },
 ];