Browse Source

Views for CombinedCamera

zz85 14 years ago
parent
commit
056daa25c6
2 changed files with 86 additions and 15 deletions
  1. 35 15
      examples/canvas_camera_orthographic2.html
  2. 51 0
      src/extras/cameras/CombinedCamera.js

+ 35 - 15
examples/canvas_camera_orthographic2.html

@@ -26,6 +26,40 @@
 		<script src="js/RequestAnimationFrame.js"></script>
 		<script src="js/RequestAnimationFrame.js"></script>
 		<script src="js/Stats.js"></script>
 		<script src="js/Stats.js"></script>
 
 
+		<div style="position: absolute; top: 10px; width: 100%; text-align: center; ">
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - Combo Camera<br>
+			View: <a href="#" onclick="setOrthographic();return false;"> Orthographic</a> | 
+				<a href="#" onclick="setPerspective();return false;">Perspective</a><br>
+			Lens: <a href="#" onclick="setLens(12);return false;">12mm</a> | 
+				<a href="#" onclick="setLens(16);return false;">16mm</a> | 
+				<a href="#" onclick="setLens(24);return false;">24mm</a> | 
+				<a href="#" onclick="setLens(35);return false;">35mm</a> | 
+				<a href="#" onclick="setLens(50);return false;">50mm</a> | 
+				<a href="#" onclick="setLens(60);return false;">60mm</a> | 
+				<a href="#" onclick="setLens(85);return false;">85mm</a> | 
+				<a href="#" onclick="setLens(105);return false;">105mm</a><br>
+			Fov: <a href="#" onclick="setFov(30);return false;">30°</a> | 
+				<a href="#" onclick="setFov(50);return false;">50°</a> | 
+				<a href="#" onclick="setFov(70);return false;">70°</a> | 
+				<a href="#" onclick="setFov(100);return false;">100°</a><br>
+			Zoom: 0.5x |
+					1x |
+					2x |
+					
+				<br/>
+			Views: <a href="#" onclick="camera.toTopView();return false;">Top view</a> |
+				<a href="#" onclick="camera.toBottomView();return false;">Bottom view</a> |
+				<a href="#" onclick="camera.toLeftView();return false;">Left view</a> |
+				<a href="#" onclick="camera.toRightView();return false;">Right view</a> |
+				<a href="#" onclick="camera.toFrontView();return false;">Front view</a> |
+				<a href="#" onclick="camera.toBackView();return false;">Back view</a> |
+				
+				<br/>
+			<div id="fov"></div>
+		</div>
+			
+
+
 		<script>
 		<script>
 
 
 			var container, stats;
 			var container, stats;
@@ -64,21 +98,7 @@
 				container = document.createElement( 'div' );
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 				document.body.appendChild( container );
 
 
-				var info = document.createElement( 'div' );
-				info.style.position = 'absolute';
-				info.style.top = '10px';
-				info.style.width = '100%';
-				info.style.textAlign = 'center';
-				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - Combo Camera' +
-				'<br/>View: <a href="#" onclick="setOrthographic();return false;"> Orthographic</a> | <a href="#" onclick="setPerspective();return false;">Perspective</a>' +
-				'<br/>Lens: <a href="#" onclick="setLens(12);return false;">12mm</a> | <a href="#" onclick="setLens(16);return false;">16mm</a> | <a href="#" onclick="setLens(24);return false;">24mm</a> | ' +
-				'<a href="#" onclick="setLens(35);return false;">35mm</a> | <a href="#" onclick="setLens(50);return false;">50mm</a> | <a href="#" onclick="setLens(60);return false;">60mm</a> |' +
-				' <a href="#" onclick="setLens(85);return false;">85mm</a> | <a href="#" onclick="setLens(105);return false;">105mm</a>' +
-				'<br/>Fov: <a href="#" onclick="setFov(30);return false;">30&deg;</a> | <a href="#" onclick="setFov(50);return false;">50&deg;</a> | <a href="#" onclick="setFov(70);return false;">70&deg;</a> | <a href="#" onclick="setFov(100);return false;">100&deg;</a> <br/><div id="fov"/>';
-				container.appendChild( info );
-
-
-				camera = new THREE.CombinedCamera( window.innerWidth, window.innerHeight, 70, 1, 1000, -1000, 1000, 1000 );
+				camera = new THREE.CombinedCamera( window.innerWidth /2, window.innerHeight/2, 70, 1, 1000, -1000, 1000, 1000 );
 
 
 				camera.position.x = 200;
 				camera.position.x = 200;
 				camera.position.y = 100;
 				camera.position.y = 100;

+ 51 - 0
src/extras/cameras/CombinedCamera.js

@@ -27,6 +27,9 @@ THREE.CombinedCamera.prototype.toPerspective = function () {
 	this.near = this.cameraP.near;
 	this.near = this.cameraP.near;
 	this.far = this.cameraP.far;
 	this.far = this.cameraP.far;
 	this.projectionMatrix = this.cameraP.projectionMatrix;
 	this.projectionMatrix = this.cameraP.projectionMatrix;
+	
+	this.isPersepective = true;
+	this.isOrthographics = false;
 
 
 };
 };
 
 
@@ -35,6 +38,9 @@ THREE.CombinedCamera.prototype.toOrthographic = function () {
 	this.near = this.cameraO.near;
 	this.near = this.cameraO.near;
 	this.far = this.cameraO.far;
 	this.far = this.cameraO.far;
 	this.projectionMatrix = this.cameraO.projectionMatrix;
 	this.projectionMatrix = this.cameraO.projectionMatrix;
+	
+	this.isPersepective = false;
+	this.isOrthographics = true;
 
 
 };
 };
 
 
@@ -61,3 +67,48 @@ THREE.CombinedCamera.prototype.setLens = function(focalLength, framesize) {
 
 
 	return fov;
 	return fov;
 };
 };
+
+THREE.CombinedCamera.prototype.toFrontView = function() {
+	this.rotation.x = 0;
+	this.rotation.y = 0;
+	this.rotation.z = 0;
+	
+	//TODO: Better way to disable camera.lookAt()?
+	this.rotationAutoUpdate = false;
+};
+
+THREE.CombinedCamera.prototype.toBackView = function() {
+	this.rotation.x = 0;
+	this.rotation.y = Math.PI;
+	this.rotation.z = 0;
+	this.rotationAutoUpdate = false;
+};
+	
+THREE.CombinedCamera.prototype.toLeftView = function() {
+	this.rotation.x = 0;
+	this.rotation.y = - Math.PI / 2;
+	this.rotation.z = 0;
+	this.rotationAutoUpdate = false;
+};
+
+THREE.CombinedCamera.prototype.toRightView = function() {
+	this.rotation.x = 0;
+	this.rotation.y = Math.PI / 2;
+	this.rotation.z = 0;
+	this.rotationAutoUpdate = false;
+};
+
+THREE.CombinedCamera.prototype.toTopView = function() {
+	this.rotation.x = - Math.PI / 2;
+	this.rotation.y = 0;
+	this.rotation.z = 0;
+	this.rotationAutoUpdate = false;
+};
+
+THREE.CombinedCamera.prototype.toBottomView = function() {
+	this.rotation.x = Math.PI / 2;
+	this.rotation.y = 0;
+	this.rotation.z = 0;
+	this.rotationAutoUpdate = false;
+};
+