Browse Source

Add VR configuration option

Wolfgang Meyers 5 years ago
parent
commit
ba0980bdaf
4 changed files with 37 additions and 1 deletions
  1. 2 0
      editor/index.html
  2. 1 0
      editor/js/Config.js
  3. 14 0
      editor/js/Sidebar.Project.js
  4. 20 1
      editor/js/libs/app.js

+ 2 - 0
editor/index.html

@@ -54,6 +54,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 +71,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 );

+ 1 - 0
editor/js/Config.js

@@ -13,6 +13,7 @@ var Config = function () {
 
 		'project/title': '',
 		'project/editable': false,
+		'project/webvr': false,
 
 		'project/renderer/antialias': true,
 		'project/renderer/shadows': true,

+ 14 - 0
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();

+ 20 - 1
editor/js/libs/app.js

@@ -1,3 +1,4 @@
+
 /**
  * @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() ) {
+				document.body.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 );