Added PaintViveController.

examples/js/vr/PaintViveController.js

+/**
+ * @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;

examples/webvr_vive_paint.html

@@ -24,6 +24,7 @@
 		<script src="js/controls/VRControls.js"></script>
 		<script src="js/effects/VREffect.js"></script>
 		<script src="js/vr/ViveController.js"></script>
+		<script src="js/vr/PaintViveController.js"></script>
 		<script src="js/vr/WebVR.js"></script>
 
 		<script src="js/loaders/OBJLoader.js"></script>
@@ -54,8 +55,6 @@
 			var vector3 = new THREE.Vector3();
 			var vector4 = new THREE.Vector3();
 
-			var color = new THREE.Color( 0, 0, 0 );
-
 			var point4 = new THREE.Vector3();
 			var point5 = new THREE.Vector3();
 
@@ -148,13 +147,13 @@
 
 				// controllers
 
-				controller1 = new THREE.ViveController( 0 );
+				controller1 = new THREE.PaintViveController( 0 );
 				controller1.standingMatrix = controls.getStandingMatrix();
 				controller1.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
 				controller1.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
 				scene.add( controller1 );
 
-				controller2 = new THREE.ViveController( 1 );
+				controller2 = new THREE.PaintViveController( 1 );
 				controller2.standingMatrix = controls.getStandingMatrix();
 				controller2.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
 				controller2.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
@@ -182,10 +181,9 @@
 					pivot.rotation.x = Math.PI / 5.5;
 					controller.add( pivot );
 
-					var range = new THREE.Mesh( new THREE.IcosahedronGeometry( 0.03, 3 ), new THREE.MeshBasicMaterial( { opacity: 0.25, transparent: true } ) );
-					pivot.add( range );
-
 					controller1.add( controller.clone() );
+
+					pivot.material = pivot.material.clone();
 					controller2.add( controller.clone() );
 
 				} );
@@ -265,7 +263,9 @@
 
 			}
 
-			function stroke( point1, point2, matrix1, matrix2 ) {
+			function stroke( controller, point1, point2, matrix1, matrix2 ) {
+
+				var color = controller.getColor();
 
 				var shape = shapes[ 'tube' ];
 
@@ -373,7 +373,7 @@
 
 			}
 
-			function handleController( controller, id ) {
+			function handleController( controller ) {
 
 				controller.update();
 
@@ -381,6 +381,8 @@
 
 				if ( pivot ) {
 
+					pivot.material.color.copy( controller.getColor() );
+
 					var matrix = pivot.matrixWorld;
 
 					var point1 = controller.userData.points[ 0 ];
@@ -392,15 +394,9 @@
 					point1.setFromMatrixPosition( matrix );
 					matrix1.lookAt( point2, point1, up );
 
-					if ( controller.getButtonState( 'thumbpad' ) ) {
-
-						color.setHex( Math.random() * 0xffffff );
-
-					}
-
 					if ( controller.getButtonState( 'trigger' ) ) {
 
-						stroke( point1, point2, matrix1, matrix2 );
+						stroke( controller, point1, point2, matrix1, matrix2 );
 
 					}
 
@@ -415,8 +411,8 @@
 
 				controls.update();
 
-				handleController( controller1, 0 );
-				handleController( controller2, 1 );
+				handleController( controller1 );
+				handleController( controller2 );
 
 				effect.render( scene, camera );