webvr js meetup initial commit

node_modules/three/examples/js/vr/PaintViveController.js

@@ -0,0 +1,107 @@
+/**
+ * @author mrdoob / http://mrdoob.com
+ */
+
+THREE.PaintViveController = function ( id ) {
+
+	THREE.ViveController.call( this, id );
+
+	var PI2 = Math.PI * 2;
+
+	var MODES = { COLOR: 0, SIZE: 1 };
+	var mode = MODES.COLOR;
+
+	var color = new THREE.Color( 1, 1, 1 );
+	var size = 1.0;
+
+	//
+
+	function generateHueTexture() {
+
+		var canvas = document.createElement( 'canvas' );
+		canvas.width = 256;
+		canvas.height = 256;
+
+		var context = canvas.getContext( '2d' );
+		var imageData = context.getImageData( 0, 0, 256, 256 );
+		var data = imageData.data;
+
+		for ( var i = 0, j = 0; i < data.length; i += 4, j ++ ) {
+
+			var x = ( ( j % 256 ) / 256 ) - 0.5;
+			var y = ( Math.floor( j / 256 ) / 256 ) - 0.5;
+
+			color.setHSL( Math.atan2( y, x ) / PI2, 1,( 0.5 - Math.sqrt( x * x + y * y ) ) * 2.0 );
+
+			data[ i + 0 ] = color.r * 256;
+			data[ i + 1 ] = color.g * 256;
+			data[ i + 2 ] = color.b * 256;
+			data[ i + 3 ] = 256;
+
+		}
+
+		context.putImageData( imageData, 0, 0 );
+
+		return new THREE.CanvasTexture( canvas );
+
+	}
+
+	var geometry = new THREE.CircleGeometry( 1, 32 );
+	var material = new THREE.MeshBasicMaterial( { map: generateHueTexture() } );
+	var mesh = new THREE.Mesh( geometry, material );
+	mesh.position.set( 0, 0.005, 0.0495 );
+	mesh.rotation.x = - 1.45;
+	mesh.scale.setScalar( 0.02 );
+	this.add( mesh );
+
+	var geometry = new THREE.IcosahedronGeometry( 0.1, 2 );
+	var material = new THREE.MeshBasicMaterial();
+	material.color = color;
+	var ball = new THREE.Mesh( geometry, material );
+	mesh.add( ball );
+
+	function onAxisChanged( event ) {
+
+		if ( this.getButtonState( 'thumbpad' ) === false ) return;
+
+		var x = event.axes[ 0 ] / 2.0;
+		var y = - event.axes[ 1 ] / 2.0;
+
+		if ( mode === MODES.COLOR ) {
+			color.setHSL( Math.atan2( y, x ) / PI2, 1, ( 0.5 - Math.sqrt( x * x + y * y ) ) * 2.0 );
+			ball.position.x = event.axes[ 0 ];
+			ball.position.y = event.axes[ 1 ];
+		}
+
+		if ( mode === MODES.SIZE ) {
+			size = y + 1;
+		}
+
+	}
+
+	function onGripsDown( event ) {
+
+		if ( mode === MODES.COLOR ) {
+			mode = MODES.SIZE;
+			mesh.visible = false;
+			return;
+		}
+
+		if ( mode === MODES.SIZE ) {
+			mode = MODES.COLOR;
+			mesh.visible = true;
+			return;
+		}
+
+	}
+
+	this.getColor = function () { return color; };
+	this.getSize = function () { return size; };
+
+	this.addEventListener( 'axischanged', onAxisChanged );
+	this.addEventListener( 'gripsdown', onGripsDown );
+
+};
+
+THREE.PaintViveController.prototype = Object.create( THREE.ViveController.prototype );
+THREE.PaintViveController.prototype.constructor = THREE.PaintViveController;

node_modules/three/examples/js/vr/ViveController.js

@@ -0,0 +1,128 @@
+/**
+ * @author mrdoob / http://mrdoob.com
+ * @author stewdio / http://stewd.io
+ */
+
+THREE.ViveController = function ( id ) {
+
+	THREE.Object3D.call( this );
+
+	var scope = this;
+	var gamepad;
+
+	var axes = [ 0, 0 ];
+	var thumbpadIsPressed = false;
+	var triggerIsPressed = false;
+	var gripsArePressed = false;
+	var menuIsPressed = false;
+
+	function findGamepad( id ) {
+
+		// Iterate across gamepads as Vive Controllers may not be
+		// in position 0 and 1.
+
+		var gamepads = navigator.getGamepads();
+
+		for ( var i = 0, j = 0; i < 4; i ++ ) {
+
+			var gamepad = gamepads[ i ];
+
+			if ( gamepad && ( gamepad.id === 'OpenVR Gamepad' || gamepad.id === 'Oculus Touch (Left)' || gamepad.id === 'Oculus Touch (Right)' ) ) {
+
+				if ( j === id ) return gamepad;
+
+				j ++;
+
+			}
+
+		}
+
+	}
+
+	this.matrixAutoUpdate = false;
+	this.standingMatrix = new THREE.Matrix4();
+
+	this.getGamepad = function () {
+
+		return gamepad;
+
+	};
+
+	this.getButtonState = function ( button ) {
+
+		if ( button === 'thumbpad' ) return thumbpadIsPressed;
+		if ( button === 'trigger' ) return triggerIsPressed;
+		if ( button === 'grips' ) return gripsArePressed;
+		if ( button === 'menu' ) return menuIsPressed;
+
+	};
+
+	this.update = function () {
+
+		gamepad = findGamepad( id );
+
+		if ( gamepad !== undefined && gamepad.pose !== undefined ) {
+
+			if ( gamepad.pose === null ) return; // No user action yet
+
+			//  Position and orientation.
+
+			var pose = gamepad.pose;
+
+			if ( pose.position !== null ) scope.position.fromArray( pose.position );
+			if ( pose.orientation !== null ) scope.quaternion.fromArray( pose.orientation );
+			scope.matrix.compose( scope.position, scope.quaternion, scope.scale );
+			scope.matrix.multiplyMatrices( scope.standingMatrix, scope.matrix );
+			scope.matrixWorldNeedsUpdate = true;
+			scope.visible = true;
+
+			//  Thumbpad and Buttons.
+
+			if ( axes[ 0 ] !== gamepad.axes[ 0 ] || axes[ 1 ] !== gamepad.axes[ 1 ] ) {
+
+				axes[ 0 ] = gamepad.axes[ 0 ]; //  X axis: -1 = Left, +1 = Right.
+				axes[ 1 ] = gamepad.axes[ 1 ]; //  Y axis: -1 = Bottom, +1 = Top.
+				scope.dispatchEvent( { type: 'axischanged', axes: axes } );
+
+			}
+
+			if ( thumbpadIsPressed !== gamepad.buttons[ 0 ].pressed ) {
+
+				thumbpadIsPressed = gamepad.buttons[ 0 ].pressed;
+				scope.dispatchEvent( { type: thumbpadIsPressed ? 'thumbpaddown' : 'thumbpadup' } );
+
+			}
+
+			if ( triggerIsPressed !== gamepad.buttons[ 1 ].pressed ) {
+
+				triggerIsPressed = gamepad.buttons[ 1 ].pressed;
+				scope.dispatchEvent( { type: triggerIsPressed ? 'triggerdown' : 'triggerup' } );
+
+			}
+
+			if ( gripsArePressed !== gamepad.buttons[ 2 ].pressed ) {
+
+				gripsArePressed = gamepad.buttons[ 2 ].pressed;
+				scope.dispatchEvent( { type: gripsArePressed ? 'gripsdown' : 'gripsup' } );
+
+			}
+
+			if ( menuIsPressed !== gamepad.buttons[ 3 ].pressed ) {
+
+				menuIsPressed = gamepad.buttons[ 3 ].pressed;
+				scope.dispatchEvent( { type: menuIsPressed ? 'menudown' : 'menuup' } );
+
+			}
+
+		} else {
+
+			scope.visible = false;
+
+		}
+
+	};
+
+};
+
+THREE.ViveController.prototype = Object.create( THREE.Object3D.prototype );
+THREE.ViveController.prototype.constructor = THREE.ViveController;

node_modules/three/examples/js/vr/WebVR.js

@@ -0,0 +1,102 @@
+/**
+ * @author mrdoob / http://mrdoob.com
+ * Based on @tojiro's vr-samples-utils.js
+ */
+
+var WEBVR = {
+
+	isLatestAvailable: function () {
+
+		console.warn( 'WEBVR: isLatestAvailable() is being deprecated. Use .isAvailable() instead.' );
+		return this.isAvailable();
+
+	},
+
+	isAvailable: function () {
+
+		return navigator.getVRDisplays !== undefined;
+
+	},
+
+	getMessage: function () {
+
+		var message;
+
+		if ( navigator.getVRDisplays ) {
+
+			navigator.getVRDisplays().then( function ( displays ) {
+
+				if ( displays.length === 0 ) message = 'WebVR supported, but no VRDisplays found.';
+
+			} );
+
+		} else {
+
+			message = 'Your browser does not support WebVR. See <a href="http://webvr.info">webvr.info</a> for assistance.';
+
+		}
+
+		if ( message !== undefined ) {
+
+			var container = document.createElement( 'div' );
+			container.style.position = 'absolute';
+			container.style.left = '0';
+			container.style.top = '0';
+			container.style.right = '0';
+			container.style.zIndex = '999';
+			container.align = 'center';
+
+			var error = document.createElement( 'div' );
+			error.style.fontFamily = 'sans-serif';
+			error.style.fontSize = '16px';
+			error.style.fontStyle = 'normal';
+			error.style.lineHeight = '26px';
+			error.style.backgroundColor = '#fff';
+			error.style.color = '#000';
+			error.style.padding = '10px 20px';
+			error.style.margin = '50px';
+			error.style.display = 'inline-block';
+			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% - 50px)';
+		button.style.bottom = '20px';
+		button.style.width = '100px';
+		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.textAlign = 'center';
+		button.style.zIndex = '999';
+		button.textContent = 'ENTER VR';
+		button.onclick = function() {
+
+			effect.isPresenting ? effect.exitPresent() : effect.requestPresent();
+
+		};
+
+		window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
+
+			button.textContent = effect.isPresenting ? 'EXIT VR' : 'ENTER VR';
+
+		}, false );
+
+		return button;
+
+	}
+
+};