Updated webvr_ballshooter to use two controllers.

examples/webvr_ballshooter.html

@@ -32,7 +32,7 @@
 
 			var container;
 			var camera, scene, renderer;
-			var controller, isSelecting = false;
+			var controller1, controller2;
 
 			var room;
 
@@ -105,27 +105,40 @@
 
 				document.body.appendChild( WEBVR.createButton( renderer ) );
 
-				//
+				// controllers
 
-				controller = renderer.vr.getController( 0 );
-				controller.addEventListener( 'selectstart', function () {
+				function onSelectStart() {
 
-					isSelecting = true;
+					this.userData.isSelecting = true;
 
-				} );
-				controller.addEventListener( 'selectend', function () {
+				}
 
-					isSelecting = false;
+				function onSelectEnd() {
 
-				} );
-				scene.add( controller );
+					this.userData.isSelecting = false;
 
-				//
+				}
+
+				controller1 = renderer.vr.getController( 0 );
+				controller1.addEventListener( 'selectstart', onSelectStart );
+				controller1.addEventListener( 'selectend', onSelectEnd );
+				scene.add( controller1 );
+
+				controller2 = renderer.vr.getController( 1 );
+				controller2.addEventListener( 'selectstart', onSelectStart );
+				controller2.addEventListener( 'selectend', onSelectEnd );
+				scene.add( controller2 );
+
+				// helpers
+
+				var geometry = new THREE.BufferGeometry();
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 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 );
+				var material = new THREE.LineBasicMaterial( { vertexColors: true, linewidth: 2, blending: THREE.AdditiveBlending } );
+
+				controller1.add( new THREE.Line( geometry, material ) );
+				controller2.add( new THREE.Line( geometry, material ) );
 
 				//
 
@@ -142,17 +155,9 @@
 
 			}
 
-			//
-
-			function animate() {
-
-				renderer.setAnimationLoop( render );
+			function handleController( controller ) {
 
-			}
-
-			function render() {
-
-				if ( isSelecting ) {
+				if ( controller.userData.isSelecting ) {
 
 					var cube = room.children[ 0 ];
 					room.remove( cube );
@@ -166,6 +171,21 @@
 
 				}
 
+			}
+
+			//
+
+			function animate() {
+
+				renderer.setAnimationLoop( render );
+
+			}
+
+			function render() {
+
+				handleController( controller1 );
+				handleController( controller2 );
+
 				// keep cubes inside room
 
 				var range = 3 - radius;