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 #5499 from dmarcos/mouseHeadRotation

It allows use the mouse to rotate the camera instead of the HMD sensors....
Mr.doob 10 years ago
parent
e3cea8e1a2 04b04fa986
commit
e9536f43c3
2 changed files with 92 additions and 6 deletions
Split View Show Diff Stats
  1. 55 0
      examples/js/controls/MouseControls.js
  2. 37 6
      examples/webgl_effects_vr.html

+ 55 - 0
examples/js/controls/MouseControls.js
View File 

@@ -0,0 +1,55 @@
 
+/**
 
+ * @author dmarcos / http://github.com/dmarcos
 
+ *
 
+ * This controls allow to change the orientation of the camera using the mouse
 
+ */
 
+
 
+THREE.MouseControls = function ( object ) {
 
+
 
+  var scope = this;
 
+  var PI_2 = Math.PI / 2;
 
+  var mouseQuat = {
 
+    x: new THREE.Quaternion(),
 
+    y: new THREE.Quaternion()
 
+  };
 
+  var object = object;
 
+  var xVector = new THREE.Vector3( 1, 0, 0 );
 
+  var yVector = new THREE.Vector3( 0, 1, 0 );
 
+
 
+  var onMouseMove = function ( event ) {
 
+
 
+    if ( scope.enabled === false ) return;
 
+
 
+    var orientation = scope.orientation;
 
+
 
+    var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
 
+    var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
 
+
 
+    orientation.y += movementX * 0.0025;
 
+    orientation.x += movementY * 0.0025;
 
+
 
+    orientation.x = Math.max( - PI_2, Math.min( PI_2, orientation.x ) );
 
+
 
+  };
 
+
 
+  this.enabled = true;
 
+
 
+  this.orientation = {
 
+    x: 0,
 
+    y: 0,
 
+  };
 
+
 
+  this.update = function() {
 
+
 
+    if ( this.enabled === false ) return;
 
+
 
+    mouseQuat.x.setFromAxisAngle( xVector, this.orientation.x );
 
+    mouseQuat.y.setFromAxisAngle( yVector, this.orientation.y );
 
+    object.quaternion.copy(mouseQuat.y).multiply(mouseQuat.x)
 
+    return;
 
+
 
+  };
 
+
 
+  document.addEventListener( 'mousemove', onMouseMove, false );
 
+
 
+};

+ 37 - 6
examples/webgl_effects_vr.html
View File 

@@ -12,15 +12,23 @@
 
 				overflow: hidden;
 
 			}
 
 
-			.button {
 
+			.menu {
 
 				position: fixed;
 
 				bottom: 20px;
 
 				right: 20px;
 
+			}
 
+
 
+			.button {
 
+				display: inline-block;
 
 				padding: 8px;
 
 				color: #FFF;
 
 				background-color: #555;
 
 			}
 
 
+			.button.enabled {
 
+				background-color: rgb(18, 36, 70);
 
+			}
 
+
 
 			.button:hover {
 
 				cursor: pointer;
 
 				background-color: rgb(18, 36, 70);
 
@@ -34,9 +42,13 @@
 
 		</style>
 
 	</head>
 
 	<body>
 
-		<div class="button">Start VR Mode</div>
 
+		<div class="menu">
 
+			<div class="button mouse-look">Enable Mouse Look</div>
 
+			<div class="button full-screen">Start VR Mode</div>
 
+		</div>
 
 
 		<script src="../build/three.min.js"></script>
 
+		<script src="js/controls/MouseControls.js"></script>
 
 		<script src="js/effects/VREffect.js"></script>
 
 		<script src="js/controls/VRControls.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
@@ -47,7 +59,8 @@
 
 			var camera, scene, raycaster, renderer;
 
 			var vrEffect;
 
 			var vrControls;
 
-			var fullScreenButton = document.querySelector( '.button' );
 
+			var mouseControls;
 
+			var headControls;
 
 
 			var mouse = new THREE.Vector2(), INTERSECTED;
 
 			var radius = 100, theta = 0;
 
@@ -102,13 +115,31 @@
 
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 
-				var fullScreenButton = document.querySelector( '.button' );
 
+				var fullScreenButton = document.querySelector( '.full-screen' );
 
+				var mouseLookButton = document.querySelector( '.mouse-look' );
 
+				var mouseLook = false;
 
+
 
 				fullScreenButton.onclick = function() {
 
 					vrEffect.setFullScreen( true );
 
 				};
 
 
-				vrEffect = new THREE.VREffect(renderer, VREffectLoaded);
 
 				vrControls = new THREE.VRControls(camera);
 
+				mouseControls = new THREE.MouseControls(camera);
 
+				headControls = vrControls;
 
+
 
+				mouseLookButton.onclick = function() {
 
+					mouseLook = !mouseLook;
 
+
 
+					if (mouseLook) {
 
+						headControls = mouseControls;
 
+						mouseLookButton.classList.add('enabled');
 
+					} else {
 
+						headControls = vrControls;
 
+						mouseLookButton.classList.remove('enabled');
 
+					}
 
+				}
 
+
 
+				vrEffect = new THREE.VREffect(renderer, VREffectLoaded);
 
 				function VREffectLoaded(error) {
 
 					if (error) {
 
 						fullScreenButton.innerHTML = error;
 
@@ -200,7 +231,7 @@
 
 
 				}
 
 
-				vrControls.update();
 
+				headControls.update();
 
 				vrEffect.render( scene, camera );
 
 
 			}