Merge pull request #6340 from brianpeiris/firefox-webvr-fix

Fix for Firefox WebVR

examples/js/controls/VRControls.js

@@ -9,13 +9,43 @@ THREE.VRControls = function ( object, onError ) {
 
 	var vrInputs = [];
 
+	function filterInvalidDevices( devices ) {
+
+		var
+			OculusDeviceName = 'VR Position Device (oculus)',
+			CardboardDeviceName = 'VR Position Device (cardboard)';
+
+
+		// Exclude Cardboard position sensor if Oculus exists.
+		var oculusDevices = devices.filter( function ( device ) {
+
+			return device.deviceName === OculusDeviceName;
+
+		} );
+
+		if ( oculusDevices.length >= 1 ) {
+
+			return devices.filter( function ( device ) {
+
+				return device.deviceName !== CardboardDeviceName;
+
+			} );
+
+		} else {
+
+			return devices;
+
+		}
+
+	}
+
 	function gotVRDevices( devices ) {
 
-		for ( var i = 0; i < devices.length; i ++ ) {
+		devices = filterInvalidDevices( devices );
 
-			var device = devices[ i ];
+		for ( var i = 0; i < devices.length; i ++ ) {
 
-			if ( device instanceof PositionSensorVRDevice ) {
+			if ( devices[ i ] instanceof PositionSensorVRDevice ) {
 
 				vrInputs.push( devices[ i ] );
 
@@ -41,7 +71,7 @@ THREE.VRControls = function ( object, onError ) {
 
 	this.update = function () {
 
-		for ( var i = 0; i < vrInputs.length; i++ ) {
+		for ( var i = 0; i < vrInputs.length; i ++ ) {
 
 			var vrInput = vrInputs[ i ];
 
@@ -65,7 +95,7 @@ THREE.VRControls = function ( object, onError ) {
 
 	this.resetSensor = function () {
 
-		for ( var i = 0; i < vrInputs.length; i++ ) {
+		for ( var i = 0; i < vrInputs.length; i ++ ) {
 
 			var vrInput = vrInputs[ i ];
 

examples/vr_cubes.html

@@ -58,8 +58,9 @@
 			var vrEffect;
 			var vrControls;
 
-			var mouse = new THREE.Vector2(), INTERSECTED;
+			var INTERSECTED;
 			var radius = 100, theta = 0;
+			var crosshair;
 
 			init();
 			animate();
@@ -81,6 +82,16 @@
 
 				scene = new THREE.Scene();
 
+				crosshair = new THREE.Mesh(
+					new THREE.RingGeometry( 0.5, 1, 32 ),
+					new THREE.MeshBasicMaterial( {
+						color: 0x00bb00,
+						transparent: true,
+						opacity: 0.5
+					} )
+				);
+				scene.add( crosshair );
+
 				var light = new THREE.DirectionalLight( 0xffffff, 1 );
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
@@ -130,7 +141,9 @@
 				} );
 
 				fullScreenButton.onclick = function() {
+
 					vrEffect.setFullScreen( true );
+
 				};
 
 				renderer.setClearColor( 0xf0f0f0 );
@@ -143,8 +156,6 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -160,15 +171,6 @@
 
 			}
 
-			function onDocumentMouseMove( event ) {
-
-				event.preventDefault();
-
-				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
-
-			}
-
 			//
 
 			function animate() {
@@ -182,18 +184,9 @@
 
 			function render() {
 
-				theta += 0.1;
-
-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
-				camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
-				camera.lookAt( scene.position );
-
-				camera.updateMatrixWorld();
-
 				// find intersections
 
-				raycaster.setFromCamera( mouse, camera );
+				raycaster.setFromCamera( { x: 0, y: 0 }, camera );
 
 				var intersects = raycaster.intersectObjects( scene.children );
 
@@ -218,6 +211,24 @@
 				}
 
 				vrControls.update();
+
+				crosshair.quaternion.copy( camera.quaternion );
+				crosshair.position.set( 0, 0, 0 );
+
+				if ( INTERSECTED ) {
+
+					crosshair.translateZ(
+						-scene.position.distanceTo( INTERSECTED.position ) +
+						INTERSECTED.geometry.boundingSphere.radius + 5
+					);
+
+				}
+				else {
+
+					crosshair.translateZ(-40);
+
+				}
+
 				vrEffect.render( scene, camera );
 
 			}