Merge branch 'gui'

examples/canvas_camera_orthographic2.html

@@ -26,6 +26,40 @@
 		<script src="js/RequestAnimationFrame.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: <a href="#" onclick="camera.setZoom(0.5);return false;">0.5x</a> |
+					<a href="#" onclick="camera.setZoom(1);return false;">1x</a> |
+					<a href="#" onclick="camera.setZoom(2);return false;">2x</a> |
+					
+				<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> |
+				<a href="#" onclick="camera.rotationAutoUpdate = true;return false;">Look at Scene</a>
+				<br/>
+			<div id="fov"></div>
+		</div>
+			
+
+
 		<script>
 
 			var container, stats;
@@ -64,21 +98,7 @@
 				container = document.createElement( 'div' );
 				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.y = 100;

src/extras/cameras/CombinedCamera.js

@@ -11,11 +11,26 @@ THREE.CombinedCamera = function ( width, height, fov, near, far, orthonear, orth
 
 	THREE.Camera.call( this );
 
+	this.fov = fov;
+	
+	this.left = -width / 2;
+	this.right = width / 2
+	this.top = height / 2;
+	this.bottom = -height / 2;
+	
 	// We could also handle the projectionMatrix internally, but just wanted to test nested camera objects
 	this.cameraO = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 	orthonear, orthofar );
 	this.cameraP = new THREE.PerspectiveCamera( fov, width/height, near, far );
 
+	this.zoom = 1;
+	
 	this.toPerspective();
+	
+	
+	var aspect = width/height;
+	
+	
+
 
 };
 
@@ -26,22 +41,67 @@ THREE.CombinedCamera.prototype.toPerspective = function () {
 
 	this.near = this.cameraP.near;
 	this.far = this.cameraP.far;
+	this.cameraP.fov =  this.fov / this.zoom ;
+	this.cameraP.updateProjectionMatrix();
 	this.projectionMatrix = this.cameraP.projectionMatrix;
+	
+	this.inPersepectiveMode = true;
+	this.inOrthographicMode = false;
 
 };
 
 THREE.CombinedCamera.prototype.toOrthographic = function () {
 
+	// Orthographic from Perspective
+	var fov = this.fov / this.zoom;
+	var aspect = this.cameraP.aspect;
+	var near = this.cameraP.near;
+	var far = this.cameraP.far;
+	
+	
+	var nearHalfHeight = Math.tan( fov / 2 ) * near;
+	var nearPlaneHeight = 2 * nearHalfHeight;
+	var nearPlaneWidth = nearPlaneHeight * aspect;
+	var nearHalfWidth = nearPlaneWidth / 2;
+	
+	var farHalfHeight = Math.tan( fov / 2 ) * far;
+	var farPlaneHeight = 2 * farHalfHeight;
+	var farPlaneWidth = farPlaneHeight * aspect;
+	var farHalfWidth = farPlaneWidth / 2;
+	
+	var averageHalfWidth = Math.abs(nearHalfWidth + farHalfWidth) / 2;
+	var averageHalfHeight = Math.abs(nearHalfHeight + farHalfHeight) / 2;
+	
+	
+	this.cameraO.left = -averageHalfWidth;
+	this.cameraO.right = averageHalfWidth;
+	this.cameraO.top = averageHalfHeight;
+	this.cameraO.bottom = -averageHalfHeight;
+	
+	// this.cameraO.left = -farHalfWidth;
+	// this.cameraO.right = farHalfWidth;
+	// this.cameraO.top = farHalfHeight;
+	// this.cameraO.bottom = -farHalfHeight;
+
+	// this.cameraO.left = this.left / this.zoom;
+	// this.cameraO.right = this.right / this.zoom;
+	// this.cameraO.top = this.top / this.zoom;
+	// this.cameraO.bottom = this.bottom / this.zoom;
+	
+	this.cameraO.updateProjectionMatrix();
+
 	this.near = this.cameraO.near;
 	this.far = this.cameraO.far;
 	this.projectionMatrix = this.cameraO.projectionMatrix;
+	
+	this.inPersepectiveMode = false;
+	this.inOrthographicMode = true;
 
 };
 
-THREE.CombinedCamera.prototype.setFov = function(fov) {
-
-	this.cameraP.fov = fov;
-	this.cameraP.updateProjectionMatrix();
+THREE.CombinedCamera.prototype.setFov = function(fov) {	
+	this.fov = fov;
+	
 	this.toPerspective();
 
 };
@@ -61,3 +121,62 @@ THREE.CombinedCamera.prototype.setLens = function(focalLength, framesize) {
 
 	return fov;
 };
+
+
+THREE.CombinedCamera.prototype.setZoom = function(zoom) {
+
+	this.zoom = zoom;
+	
+	if (this.inPersepectiveMode) {
+		this.toPerspective();
+	} else {
+		this.toOrthographic();
+	}
+	
+
+};
+
+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;
+};
+