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

It allows use the mouse to rotate the camera instead of the HMD sensors. It
's handy for developing without having to have an HDM connected to the computer

Diego Marcos 10 years ago
parent
2d59713328
commit
04b04fa986
2 changed files with 92 additions and 6 deletions
Unified 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;
 
 				overflow: hidden;
 
 			}
 
 			}
 
 
 
-			.button {
 
+			.menu {
 
 				position: fixed;
 
 				position: fixed;
 
 				bottom: 20px;
 
 				bottom: 20px;
 
 				right: 20px;
 
 				right: 20px;
 
+			}
 
+
 
+			.button {
 
+				display: inline-block;
 
 				padding: 8px;
 
 				padding: 8px;
 
 				color: #FFF;
 
 				color: #FFF;
 
 				background-color: #555;
 
 				background-color: #555;
 
 			}
 
 			}
 
 
 
+			.button.enabled {
 
+				background-color: rgb(18, 36, 70);
 
+			}
 
+
 
 			.button:hover {
 
 			.button:hover {
 
 				cursor: pointer;
 
 				cursor: pointer;
 
 				background-color: rgb(18, 36, 70);
 
 				background-color: rgb(18, 36, 70);
 
@@ -34,9 +42,13 @@
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<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="../build/three.min.js"></script>
 
+		<script src="js/controls/MouseControls.js"></script>
 
 		<script src="js/effects/VREffect.js"></script>
 
 		<script src="js/effects/VREffect.js"></script>
 
 		<script src="js/controls/VRControls.js"></script>
 
 		<script src="js/controls/VRControls.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
@@ -47,7 +59,8 @@
 
 			var camera, scene, raycaster, renderer;
 
 			var camera, scene, raycaster, renderer;
 
 			var vrEffect;
 
 			var vrEffect;
 
 			var vrControls;
 
 			var vrControls;
 
-			var fullScreenButton = document.querySelector( '.button' );
 
+			var mouseControls;
 
+			var headControls;
 
 
 
 			var mouse = new THREE.Vector2(), INTERSECTED;
 
 			var mouse = new THREE.Vector2(), INTERSECTED;
 
 			var radius = 100, theta = 0;
 
 			var radius = 100, theta = 0;
 
@@ -102,13 +115,31 @@
 
 
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				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() {
 
 				fullScreenButton.onclick = function() {
 
 					vrEffect.setFullScreen( true );
 
 					vrEffect.setFullScreen( true );
 
 				};
 
 				};
 
 
 
-				vrEffect = new THREE.VREffect(renderer, VREffectLoaded);
 
 				vrControls = new THREE.VRControls(camera);
 
 				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) {
 
 				function VREffectLoaded(error) {
 
 					if (error) {
 
 					if (error) {
 
 						fullScreenButton.innerHTML = error;
 
 						fullScreenButton.innerHTML = error;
 
@@ -200,7 +231,7 @@
 
 
 
 				}
 
 				}
 
 
 
-				vrControls.update();
 
+				headControls.update();
 
 				vrEffect.render( scene, camera );
 
 				vrEffect.render( scene, camera );
 
 
 
 			}
 
 			}