Prechádzať zdrojové kódy

Improvements to WebVR.js.

Mr.doob 9 rokov pred
rodič
commit
80882c569c
2 zmenil súbory, kde vykonal 37 pridanie a 25 odobranie
  1. 31 23
      examples/js/WebVR.js
  2. 6 2
      examples/webvr_rollercoaster.html

+ 31 - 23
examples/js/WebVR.js

@@ -5,32 +5,13 @@
 
 var WEBVR = {
 
-	button: function ( effect ) {
+	isAvailable: function () {
 
-		var button = document.createElement( 'button' );
-		button.style.position = 'absolute';
-		button.style.left = 'calc(50% - 30px)';
-		button.style.bottom = '20px';
-		button.style.border = '0';
-		button.style.padding = '8px';
-		button.style.cursor = 'pointer';
-		button.style.backgroundColor = '#000';
-		button.style.color = '#fff';
-		button.style.fontFamily = 'sans-serif';
-		button.style.fontSize = '13px';
-		button.style.fontStyle = 'normal';
-		button.style.zIndex = '999';
-		button.textContent = 'ENTER VR';
-		button.onclick = function() {
-
-			effect.setFullScreen( true );
-
-		};
-		document.body.appendChild( button );
+		return navigator.getVRDisplays;
 
 	},
 
-	test: function () {
+	getMessage: function () {
 
 		var message;
 
@@ -61,7 +42,6 @@ var WEBVR = {
 			container.style.right = '0';
 			container.style.zIndex = '999';
 			container.align = 'center';
-			document.body.appendChild( container );
 
 			var error = document.createElement( 'div' );
 			error.style.fontFamily = 'sans-serif';
@@ -76,8 +56,36 @@ var WEBVR = {
 			error.innerHTML = message;
 			container.appendChild( error );
 
+			return container;
+
 		}
 
+	},
+
+	getButton: function ( effect ) {
+
+		var button = document.createElement( 'button' );
+		button.style.position = 'absolute';
+		button.style.left = 'calc(50% - 30px)';
+		button.style.bottom = '20px';
+		button.style.border = '0';
+		button.style.padding = '8px';
+		button.style.cursor = 'pointer';
+		button.style.backgroundColor = '#000';
+		button.style.color = '#fff';
+		button.style.fontFamily = 'sans-serif';
+		button.style.fontSize = '13px';
+		button.style.fontStyle = 'normal';
+		button.style.zIndex = '999';
+		button.textContent = 'ENTER VR';
+		button.onclick = function() {
+
+			effect.setFullScreen( true );
+
+		};
+
+		return button;
+
 	}
 
 };

+ 6 - 2
examples/webvr_rollercoaster.html

@@ -28,7 +28,11 @@
 
 		<script>
 
-			WEBVR.test();
+			if ( WEBVR.isAvailable() !== true ) {
+
+				document.body.appendChild( WEBVR.getMessage() );
+
+			}
 
 			//
 
@@ -172,7 +176,7 @@
 			var effect = new THREE.VREffect( renderer );
 			var controls = new THREE.VRControls( camera );
 
-			WEBVR.button( effect );
+			document.body.appendChild( WEBVR.getButton( effect ) );
 
 			//