Merge pull request #18630 from wolfgangmeyers/vr-option

Editor: VR support

Merge pull request #18630 from wolfgangmeyers/vr-option
Editor: VR support
0069c9a7 · Mr.doob · GitHub · f57665fe · a598ebe8 · 0069c9a7
6 changed file
--- a/editor/index.html
+++ b/editor/index.html
@@ -42,6 +42,7 @@
 		<script src="js/libs/ternjs/doc_comment.js"></script>
 		<script src="js/libs/tern-threejs/threejs.js"></script>
 		<script src="js/libs/signals.min.js"></script>
+		<script src="../examples/js/vr/HelioWebXRPolyfill.js"></script>

 		<script type="module">

@@ -54,6 +55,7 @@
 			import { Player } from './js/Player.js';
 			import { Sidebar } from './js/Sidebar.js';
 			import { Menubar } from './js/Menubar.js';
+			import { VRButton } from '../examples/jsm/webxr/VRButton.js';

 			window.URL = window.URL || window.webkitURL;
 			window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
@@ -70,6 +72,7 @@

 			window.editor = editor; // Expose editor to Console
 			window.THREE = THREE; // Expose THREE to APP Scripts and Console
+			window.VRButton = VRButton; // Expose VRButton to APP Scripts

 			var viewport = new Viewport( editor );
 			document.body.appendChild( viewport.dom );

--- a/editor/js/Config.js
+++ b/editor/js/Config.js
@@ -14,6 +14,7 @@ var Config = function () {

 		'project/title': '',
 		'project/editable': false,
+		'project/webvr': false,

 		'project/renderer/antialias': true,
 		'project/renderer/shadows': true,

--- a/editor/js/Menubar.File.js
+++ b/editor/js/Menubar.File.js
@@ -416,6 +416,16 @@ var MenubarFile = function ( editor ) {
 			zip.file( 'js/three.module.js', content );

 		} );
+		loader.load( '../examples/jsm/webxr/VRButton.js', function ( content ) {
+
+			zip.file( 'js/VRButton.js', content );
+
+		} );
+		loader.load( '../examples/js/vr/HelioWebXRPolyfill.js', function ( content ) {
+
+			zip.file( 'js/HelioWebXRPolyfill.js', content );
+
+		} );

 	} );
 	options.add( option );

--- a/editor/js/Sidebar.Project.js
+++ b/editor/js/Sidebar.Project.js
@@ -54,6 +54,20 @@ var SidebarProject = function ( editor ) {

 	projectsettings.add( editableRow );

+	// WebVR
+
+	var vrRow = new UIRow();
+	var vr = new UICheckbox( config.getKey( 'project/vr' ) ).setLeft( '100px' ).onChange( function() {
+
+		config.setKey( 'project/vr', this.getValue() );
+
+	} );
+
+	vrRow.add( new UIText( strings.getKey( 'sidebar/project/vr' ) ).setWidth( '90px' ) );
+	vrRow.add( vr );
+
+	projectsettings.add( vrRow );
+
 	// Renderer

 	var rendererPanel = new UIPanel();

--- a/editor/js/libs/app.js
+++ b/editor/js/libs/app.js
+
 /**
 * @author mrdoob / http://mrdoob.com/
 */
@@ -12,6 +13,11 @@ var APP = {

 		var loader = new THREE.ObjectLoader();
 		var camera, scene;
+		// If VR support is turned on, this button will display
+		// when the player is running.
+		var vrButton;
+		// Returns true if VR support is enabled.
+		var vrEnabled;

 		var events = {};

@@ -27,8 +33,13 @@ var APP = {

 			var project = json.project;

+			vrEnabled = () => project.vr;
+
 			if ( project.shadows ) renderer.shadowMap.enabled = true;
-			if ( project.vr ) renderer.xr.enabled = true;
+			if ( project.vr ) { 
+				renderer.xr.enabled = true;
+				vrButton = VRButton.createButton( renderer );
+			};

 			this.setScene( loader.parse( json.scene ) );
 			this.setCamera( loader.parse( json.camera ) );
@@ -170,6 +181,10 @@ var APP = {

 		this.play = function () {

+			if ( vrEnabled() ) {
+				dom.append( vrButton );
+			}
+
 			prevTime = performance.now();

 			document.addEventListener( 'keydown', onDocumentKeyDown );
@@ -189,6 +204,10 @@ var APP = {

 		this.stop = function () {

+			if ( vrEnabled() ) {
+				vrButton.remove();
+			}
+
 			document.removeEventListener( 'keydown', onDocumentKeyDown );
 			document.removeEventListener( 'keyup', onDocumentKeyUp );
 			document.removeEventListener( 'mousedown', onDocumentMouseDown );

--- a/editor/js/libs/app/index.html
+++ b/editor/js/libs/app/index.html
@@ -16,13 +16,16 @@
 		</style>
 	</head>
 	<body ontouchstart="">
+		<script src="./js/HelioWebXRPolyfill.js"></script>

 		<script type="module">

 			import * as THREE from './js/three.module.js';
 			import { APP } from './js/app.js';
+			import { VRButton } from './js/VRButton.js';

 			window.THREE = THREE; // Used by APP Scripts.
+			window.VRButton = VRButton; // Used by APP Scripts.

 			var loader = new THREE.FileLoader();
 			loader.load( 'app.json', function ( text ) {