Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge pull request #14353 from mrdoob/webxr

WebXRManager: Added getInputSources() support.
Mr.doob 7 years ago
parent
9d663e9baa 018c1ea00e
commit
bd05280fcf
3 changed files with 91 additions and 16 deletions
Split View Show Diff Stats
  1. 16 10
      examples/webvr_daydream.html
  2. 8 0
      src/renderers/webvr/WebVRManager.js
  3. 67 6
      src/renderers/webvr/WebXRManager.js

+ 16 - 10
examples/webvr_daydream.html
View File 

@@ -26,15 +26,13 @@
 
 	<body>
 
 
 		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/vr/DaydreamController.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
 		<script>
 
 
 			var container;
 
 			var camera, scene, renderer;
 
-			var controller;
 
+			var controller, isSelecting = false;
 
 
 			var room;
 
 
@@ -109,14 +107,24 @@
 
 
 				//
 
 
-				controller = new THREE.DaydreamController();
 
-				controller.position.set( 0.3, 0.75, 0 );
 
+				controller = renderer.vr.getController( 0 );
 
+				controller.addEventListener( 'selectstart', function () {
 
+
 
+					isSelecting = true;
 
+
 
+				} );
 
+				controller.addEventListener( 'selectend', function () {
 
+
 
+					isSelecting = false;
 
+
 
+				} );
 
 				scene.add( controller );
 
 
 				//
 
 
-				var controllerHelper = new THREE.Line( new THREE.BufferGeometry(), new THREE.LineBasicMaterial( { linewidth: 2 } ) );
 
-				controllerHelper.geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 10 ], 3 ) );
 
+				var controllerHelper = new THREE.Line( new THREE.BufferGeometry(), new THREE.LineBasicMaterial( { vertexColors: true, linewidth: 2, blending: THREE.AdditiveBlending } ) );
 
+				controllerHelper.geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
 
+				controllerHelper.geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );
 
 				controller.add( controllerHelper );
 
 
 				//
 
@@ -144,9 +152,7 @@
 
 
 			function render() {
 
 
-				controller.update();
 
-
 
-				if ( controller.getTouchpadState() === true ) {
 
+				if ( isSelecting ) {
 
 
 					var cube = room.children[ 0 ];
 
 					room.remove( cube );

+ 8 - 0
src/renderers/webvr/WebVRManager.js
View File 

@@ -2,6 +2,7 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
+import { Group } from '../../objects/Group.js';
 
 import { Matrix4 } from '../../math/Matrix4.js';
 
 import { Vector3 } from '../../math/Vector3.js';
 
 import { Vector4 } from '../../math/Vector4.js';
 
@@ -85,6 +86,13 @@ function WebVRManager( renderer ) {
 
 	this.enabled = false;
 
 	this.userHeight = 1.6;
 
 
+	this.getController = function ( id ) {
 
+
 
+		console.warn( 'WebVRManager: getController() not yet implemented.' );
 
+		return new Group();
 
+
 
+	};
 
+
 
 	this.getDevice = function () {
 
 
 		return device;

+ 67 - 6
src/renderers/webvr/WebXRManager.js
View File 

@@ -2,6 +2,7 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
+import { Group } from '../../objects/Group.js';
 
 import { Vector4 } from '../../math/Vector4.js';
 
 import { ArrayCamera } from '../../cameras/ArrayCamera.js';
 
 import { PerspectiveCamera } from '../../cameras/PerspectiveCamera.js';
 
@@ -15,13 +16,16 @@ function WebXRManager( renderer ) {
 
 	var session = null;
 
 
 	var frameOfRef = null;
 
+	var inputSources = [];
 
 
 	var pose = null;
 
+	var controllers = {};
 
 
 	function isPresenting() {
 
 
 		return session !== null && frameOfRef !== null;
 
 
+
 
 	}
 
 
 	//
 
@@ -42,6 +46,23 @@ function WebXRManager( renderer ) {
 
 
 	this.enabled = false;
 
 
+	this.getController = function ( id ) {
 
+
 
+		var controller = controllers[ id ];
 
+
 
+		if ( controller === undefined ) {
 
+
 
+			controller = new Group();
 
+			controller.matrixAutoUpdate = false;
 
+
 
+			controllers[ id ] = controller;
 
+
 
+		}
 
+
 
+		return controller;
 
+
 
+	};
 
+
 
 	this.getDevice = function () {
 
 
 		return device;
 
@@ -58,18 +79,30 @@ function WebXRManager( renderer ) {
 
 
 	//
 
 
+	function onSessionEvent( event ) {
 
+
 
+		var controller = controllers[ inputSources.indexOf( event.inputSource ) ];
 
+		if ( controller ) controller.dispatchEvent( { type: event.type } );
 
+
 
+	}
 
+
 
+	function onSessionEnd () {
 
+
 
+		renderer.setFramebuffer( null );
 
+		animation.stop();
 
+
 
+	}
 
+
 
 	this.setSession = function ( value, options ) {
 
 
 		session = value;
 
 
 		if ( session !== null ) {
 
 
-			session.addEventListener( 'end', function () {
 
-
 
-				renderer.setFramebuffer( null );
 
-				animation.stop();
 
-
 
-			} );
 
+			session.addEventListener( 'select', onSessionEvent );
 
+			session.addEventListener( 'selectstart', onSessionEvent );
 
+			session.addEventListener( 'selectend', onSessionEvent );
 
+			session.addEventListener( 'end', onSessionEnd );
 
 
 			session.baseLayer = new XRWebGLLayer( session, gl );
 
 			session.requestFrameOfReference( options.frameOfReferenceType ).then( function ( value ) {
 
@@ -83,6 +116,17 @@ function WebXRManager( renderer ) {
 
 
 			} );
 
 
+			//
 
+
 
+			inputSources = session.getInputSources();
 
+
 
+			session.addEventListener( 'inputsourceschange', function () {
 
+
 
+				inputSources = session.getInputSources();
 
+				console.log( inputSources );
 
+
 
+			} );
 
+
 
 		}
 
 
 	};
 
@@ -181,6 +225,23 @@ function WebXRManager( renderer ) {
 
 
 		}
 
 
+		//
 
+
 
+		for ( var i = 0; i < inputSources.length; i ++ ) {
 
+
 
+			var inputSource = inputSources[ i ];
 
+			var inputPose = frame.getInputPose( inputSource, frameOfRef );
 
+
 
+			if ( inputPose !== null && controllers[ i ] ) {
 
+
 
+				var controller = controllers[ i ];
 
+				controller.matrix.elements = inputPose.gripMatrix;
 
+				controller.matrix.decompose( controller.position, controller.rotation, controller.scale );
 
+
 
+			}
 
+
 
+		}
 
+
 
 		if ( onAnimationFrameCallback ) onAnimationFrameCallback( time );
 
 
 	}