Browse Source

Implemented new WebVR.js API in webvr examples.

Mr.doob 7 năm trước cách đây
mục cha
commit
0b7b1f8049

+ 2 - 16
examples/webvr_daydream.html

@@ -28,14 +28,6 @@
 
 		<script>
 
-			WEBVR.checkAvailability().catch( function( message ) {
-
-				document.body.appendChild( WEBVR.getMessageContainer( message ) );
-
-			} );
-
-			//
-
 			var clock = new THREE.Clock();
 
 			var container;
@@ -120,18 +112,12 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
 				renderer.vr.enabled = true;
+				container.appendChild( renderer.domElement );
 
 				//
 
-				WEBVR.getVRDisplay( function ( device ) {
-
-					renderer.vr.setDevice( device );
-					document.body.appendChild( WEBVR.getButton( device, renderer.domElement ) );
-
-				} );
+				document.body.appendChild( WEBVR.createButton( renderer ) );
 
 				//
 

+ 3 - 16
examples/webvr_gearvr.html

@@ -24,17 +24,11 @@
 		<script src="js/loaders/MTLLoader.js"></script>
 		<script src="js/loaders/OBJLoader.js"></script>
 
-        <script src="js/vr/GearVRController.js"></script>
+		<script src="js/vr/GearVRController.js"></script>
 		<script src="js/vr/WebVR.js"></script>
 
 		<script>
 
-			WEBVR.checkAvailability().catch( function ( message ) {
-
-				document.body.appendChild( WEBVR.getMessageContainer( message ) );
-
-			} );
-
 			var clock = new THREE.Clock();
 
 			var container;
@@ -116,9 +110,10 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.vr.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				renderer.vr.enabled = true;
+				document.body.appendChild( WEBVR.createButton( renderer ) );
 
 				controller = new THREE.GearVRController();
 				camBox.position.y = 1.8;
@@ -160,14 +155,6 @@
 
 				} );
 
-				WEBVR.getVRDisplay( function ( display ) {
-
-					renderer.vr.setDevice( display );
-
-					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
-
-				} );
-
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}

+ 4 - 17
examples/webvr_panorama.html

@@ -23,14 +23,6 @@
 
 		<script>
 
-		WEBVR.checkAvailability().catch( function( message ) {
-
-			document.body.appendChild( WEBVR.getMessageContainer( message ) );
-
-		} );
-
-		//
-
 		var camera;
 		var renderer;
 		var scene;
@@ -43,23 +35,18 @@
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.vr.enabled = true;
 			document.body.appendChild( renderer.domElement );
 
-			renderer.vr.enabled = true;
+			document.body.appendChild( WEBVR.createButton( renderer ) );
+
+			//
 
 			scene = new THREE.Scene();
 
 			camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 1000 );
 			camera.layers.enable( 1 );
 
-			WEBVR.getVRDisplay( function ( display ) {
-
-				renderer.vr.setDevice( display );
-
-				document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
-
-			} );
-
 			var geometry = new THREE.CubeGeometry( 100, 100, 100 );
 			var textures = getTexturesFromAtlasFile( "textures/cube/sun_temple_stripe_stereo.jpg", 12 );
 

+ 4 - 19
examples/webvr_rollercoaster.html

@@ -29,20 +29,15 @@
 
 		<script>
 
-			WEBVR.checkAvailability().catch( function( message ) {
-
-				document.body.appendChild( WEBVR.getMessageContainer( message ) );
-
-			} );
-
-			//
-
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.vr.enabled = true;
 			document.body.appendChild( renderer.domElement );
 
-			renderer.vr.enabled = true;
+			document.body.appendChild( WEBVR.createButton( renderer ) );
+
+			//
 
 			var scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xf0f0ff );
@@ -188,16 +183,6 @@
 
 			//
 
-			WEBVR.getVRDisplay( function ( display ) {
-
-				renderer.vr.setDevice( display );
-
-				document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
-
-			} );
-
-			//
-
 			window.addEventListener( 'resize', onWindowResize, false );
 
 			function onWindowResize() {

+ 2 - 11
examples/webvr_sandbox.html

@@ -117,19 +117,10 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
-				document.body.appendChild( renderer.domElement );
-
 				renderer.vr.enabled = true;
+				document.body.appendChild( renderer.domElement );
 
-				//
-
-				WEBVR.getVRDisplay( function ( display ) {
-
-					renderer.vr.setDevice( display );
-
-					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
-
-				} );
+				document.body.appendChild( WEBVR.createButton( renderer ) );
 
 				//
 

+ 2 - 20
examples/webvr_video.html

@@ -38,14 +38,6 @@
 
 		<script>
 
-			WEBVR.checkAvailability().catch( function( message ) {
-
-				document.body.appendChild( WEBVR.getMessageContainer( message ) );
-
-			} );
-
-			//
-
 			var camera, scene, renderer;
 			var video, texture;
 
@@ -137,20 +129,10 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
 				renderer.vr.enabled = true;
+				container.appendChild( renderer.domElement );
 
-				//
-
-				WEBVR.getVRDisplay( function ( display ) {
-
-					renderer.vr.setDevice( display );
-
-					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
-
-				} );
-
+				document.body.appendChild( WEBVR.createButton( renderer ) );
 
 				//
 

+ 3 - 18
examples/webvr_vive.html

@@ -28,14 +28,6 @@
 
 		<script>
 
-			WEBVR.checkAvailability().catch( function( message ) {
-
-				document.body.appendChild( WEBVR.getMessageContainer( message ) );
-
-			} );
-
-			//
-
 			var clock = new THREE.Clock();
 
 			var container;
@@ -159,10 +151,11 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
 				renderer.vr.enabled = true;
 				renderer.vr.standing = true;
+				container.appendChild( renderer.domElement );
+
+				document.body.appendChild( WEBVR.createButton( renderer ) );
 
 				// controllers
 
@@ -190,14 +183,6 @@
 
 				} );
 
-				WEBVR.getVRDisplay( function ( display ) {
-
-					renderer.vr.setDevice( display );
-
-					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
-
-				} );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 3 - 18
examples/webvr_vive_camerarig.html

@@ -28,14 +28,6 @@
 
 		<script>
 
-			WEBVR.checkAvailability().catch( function( message ) {
-
-				document.body.appendChild( WEBVR.getMessageContainer( message ) );
-
-			} );
-
-			//
-
 			var clock = new THREE.Clock();
 
 			var container;
@@ -168,10 +160,11 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
 				renderer.vr.enabled = true;
 				renderer.vr.standing = true;
+				container.appendChild( renderer.domElement );
+
+				document.body.appendChild( WEBVR.createButton( renderer ) );
 
 				// controllers
 
@@ -203,14 +196,6 @@
 
 				} );
 
-				WEBVR.getVRDisplay( function ( display ) {
-
-					renderer.vr.setDevice( display );
-
-					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
-
-				} );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 4 - 22
examples/webvr_vive_dragging.html

@@ -28,14 +28,6 @@
 
 		<script>
 
-			WEBVR.checkAvailability().catch( function( message ) {
-
-				document.body.appendChild( WEBVR.getMessageContainer( message ) );
-
-			} );
-
-			//
-
 			var container;
 			var camera, scene, renderer;
 			var controller1, controller2;
@@ -134,13 +126,14 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.shadowMap.enabled = true;
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
-				container.appendChild( renderer.domElement );
-
+				renderer.shadowMap.enabled = true;
 				renderer.vr.enabled = true;
 				renderer.vr.standing = true;
+				container.appendChild( renderer.domElement );
+
+				document.body.appendChild( WEBVR.createButton( renderer ) );
 
 				// controllers
 
@@ -187,17 +180,6 @@
 
 				raycaster = new THREE.Raycaster();
 
-
-				//
-
-				WEBVR.getVRDisplay( function ( display ) {
-
-					renderer.vr.setDevice( display );
-
-					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
-
-				} );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 4 - 19
examples/webvr_vive_paint.html

@@ -29,14 +29,6 @@
 
 		<script>
 
-			WEBVR.checkAvailability().catch( function( message ) {
-
-				document.body.appendChild( WEBVR.getMessageContainer( message ) );
-
-			} );
-
-			//
-
 			var container;
 			var camera, scene, renderer;
 			var controller1, controller2;
@@ -133,13 +125,14 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.shadowMap.enabled = true;
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
-				container.appendChild( renderer.domElement );
-
+				renderer.shadowMap.enabled = true;
 				renderer.vr.enabled = true;
 				renderer.vr.standing = true;
+				container.appendChild( renderer.domElement );
+
+				document.body.appendChild( WEBVR.createButton( renderer ) );
 
 				// controllers
 
@@ -184,14 +177,6 @@
 
 				} );
 
-				WEBVR.getVRDisplay( function ( display ) {
-
-					renderer.vr.setDevice( display );
-
-					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
-
-				} );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 4 - 19
examples/webvr_vive_sculpt.html

@@ -29,14 +29,6 @@
 
 		<script>
 
-			WEBVR.checkAvailability().catch( function( message ) {
-
-				document.body.appendChild( WEBVR.getMessageContainer( message ) );
-
-			} );
-
-			//
-
 			var container;
 			var camera, scene, renderer;
 			var controller1, controller2;
@@ -115,13 +107,14 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.shadowMap.enabled = true;
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
-				container.appendChild( renderer.domElement );
-
+				renderer.shadowMap.enabled = true;
 				renderer.vr.enabled = true;
 				renderer.vr.standing = true;
+				container.appendChild( renderer.domElement );
+
+				document.body.appendChild( WEBVR.createButton( renderer ) );
 
 				// controllers
 
@@ -162,14 +155,6 @@
 
 				} );
 
-				WEBVR.getVRDisplay( function ( display ) {
-
-					renderer.vr.setDevice( display );
-
-					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
-
-				} );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );