Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
javascript
/
three.js
-ын хуулбар https://github.com/tazdij/three.js.git
2
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

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 жил өмнө
parent
2d59713328
commit
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 );
 
 
 			}