首页 发现 帮助
登录
javascript
/
three.js
镜像自地址 https://github.com/tazdij/three.js.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

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 年之前
父节点
2d59713328
当前提交
04b04fa986
共有 2 个文件被更改，包括 92 次插入 和 6 次删除
分列视图 显示文件统计
  1. 55 0
      examples/js/controls/MouseControls.js
  2. 37 6
      examples/webgl_effects_vr.html

+ 55 - 0
examples/js/controls/MouseControls.js
查看文件 

@@ -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
查看文件 

@@ -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 );
 
 
 			}