From 149c20d177cf11cc6a491e45f506a666b47c1c74 Mon Sep 17 00:00:00 2001 From: zz85 Date: Thu, 6 Oct 2011 00:55:26 +0800 Subject: [PATCH 1/2] Added new THREE.CombinedCamera. Added orthographic + perspective example --- examples/canvas_camera_orthographic2.html | 185 ++++++++++++++++++++++ src/extras/cameras/CombinedCamera.js | 60 +++++++ utils/build.py | 1 + 3 files changed, 246 insertions(+) create mode 100644 examples/canvas_camera_orthographic2.html create mode 100644 src/extras/cameras/CombinedCamera.js diff --git a/examples/canvas_camera_orthographic2.html b/examples/canvas_camera_orthographic2.html new file mode 100644 index 00000000..372a43fa --- /dev/null +++ b/examples/canvas_camera_orthographic2.html @@ -0,0 +1,185 @@ + + + + three.js canvas - combo camera - orthographic + perspective + + + + + + + + + + + + + + + + diff --git a/src/extras/cameras/CombinedCamera.js b/src/extras/cameras/CombinedCamera.js new file mode 100644 index 00000000..f431bc1c --- /dev/null +++ b/src/extras/cameras/CombinedCamera.js @@ -0,0 +1,60 @@ +/* + * @author zz85 / http://twitter.com/blurspline / http://www.lab4games.net/zz85/blog + * + * A handy general perpose camera, for setting FOV, Lens Focal Length, + * and switching between perspective and orthographic views easily. + * + */ + + +THREE.CombinedCamera = function ( width, height, fov, near, far, orthonear, orthofar ) { + + THREE.Camera.call( this ); + + // 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.toPerspective(); + +}; + +THREE.CombinedCamera.prototype = new THREE.Camera(); +THREE.CombinedCamera.prototype.constructor = THREE.CoolCamera; + +THREE.CombinedCamera.prototype.toPerspective = function () { + + this.near = this.cameraP.near; + this.far = this.cameraP.far; + this.projectionMatrix = this.cameraP.projectionMatrix; + +}; + +THREE.CombinedCamera.prototype.toOrthographic = function () { + this.near = this.cameraO.near; + this.far = this.cameraO.far; + this.projectionMatrix = this.cameraO.projectionMatrix; +}; + +THREE.CombinedCamera.prototype.setFov = function(fov) { + this.cameraP.fov = fov; + this.cameraP.updateProjectionMatrix(); + this.toPerspective(); + +}; + +/* +* Uses Focal Length (in mm) to estimate and set FOV +* 35mm (fullframe) camera is used if frame size is not specified; +* Formula based on http://www.bobatkins.com/photography/technical/field_of_view.html +*/ +THREE.CombinedCamera.prototype.setLens = function(focalLength, framesize) { + + if (!framesize) framesize = 43.25; // 36x24mm + + var fov = 2 * Math.atan( framesize / (focalLength * 2)); + fov = 180 / Math.PI * fov; + this.setFov(fov); + + return fov; +}; \ No newline at end of file diff --git a/utils/build.py b/utils/build.py index 2dda8351..f0398d34 100644 --- a/utils/build.py +++ b/utils/build.py @@ -100,6 +100,7 @@ EXTRAS_FILES = [ 'extras/cameras/FlyCamera.js', 'extras/cameras/RollCamera.js', 'extras/cameras/TrackballCamera.js', +'extras/cameras/CombinedCamera.js', 'extras/controls/FirstPersonControls.js', 'extras/controls/PathControls.js', 'extras/controls/FlyControls.js', From bf6e906e6498a558e74c5e7e976e50980be8cfd0 Mon Sep 17 00:00:00 2001 From: zz85 Date: Thu, 6 Oct 2011 00:56:50 +0800 Subject: [PATCH 2/2] Update builds --- build/Three.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/build/Three.js b/build/Three.js index ee031f94..1efdbc6e 100644 --- a/build/Three.js +++ b/build/Three.js @@ -69,7 +69,7 @@ THREE.Quaternion.prototype={constructor:THREE.Quaternion,set:function(b,c,e,f){t this.x=b.x*f;this.y=b.y*f;this.z=b.z*f;this.w=Math.cos(e);return this},setFromRotationMatrix:function(b){var c=Math.pow(b.determinant(),1/3);this.w=Math.sqrt(Math.max(0,c+b.n11+b.n22+b.n33))/2;this.x=Math.sqrt(Math.max(0,c+b.n11-b.n22-b.n33))/2;this.y=Math.sqrt(Math.max(0,c-b.n11+b.n22-b.n33))/2;this.z=Math.sqrt(Math.max(0,c-b.n11-b.n22+b.n33))/2;this.x=b.n32-b.n23<0?-Math.abs(this.x):Math.abs(this.x);this.y=b.n13-b.n31<0?-Math.abs(this.y):Math.abs(this.y);this.z=b.n21-b.n12<0?-Math.abs(this.z):Math.abs(this.z); this.normalize();return this},calculateW:function(){this.w=-Math.sqrt(Math.abs(1-this.x*this.x-this.y*this.y-this.z*this.z));return this},inverse:function(){this.x*=-1;this.y*=-1;this.z*=-1;return this},length:function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w)},normalize:function(){var b=Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w);b==0?this.w=this.z=this.y=this.x=0:(b=1/b,this.x*=b,this.y*=b,this.z*=b,this.w*=b);return this},multiplySelf:function(b){var c= this.x,e=this.y,f=this.z,h=this.w,k=b.x,m=b.y,n=b.z,b=b.w;this.x=c*b+h*k+e*n-f*m;this.y=e*b+h*m+f*k-c*n;this.z=f*b+h*n+c*m-e*k;this.w=h*b-c*k-e*m-f*n;return this},multiply:function(b,c){this.x=b.x*c.w+b.y*c.z-b.z*c.y+b.w*c.x;this.y=-b.x*c.z+b.y*c.w+b.z*c.x+b.w*c.y;this.z=b.x*c.y-b.y*c.x+b.z*c.w+b.w*c.z;this.w=-b.x*c.x-b.y*c.y-b.z*c.z+b.w*c.w;return this},multiplyVector3:function(b,c){c||(c=b);var e=b.x,f=b.y,h=b.z,k=this.x,m=this.y,n=this.z,p=this.w,t=p*e+m*h-n*f,w=p*f+n*e-k*h,u=p*h+k*f-m*e,e=-k* -e-m*f-n*h;c.x=t*p+e*-k+w*-n-u*-m;c.y=w*p+e*-m+u*-k-t*-n;c.z=u*p+e*-n+t*-m-w*-k;return c}};THREE.Quaternion.slerp=function(b,c,e,f){var h=b.w*c.w+b.x*c.x+b.y*c.y+b.z*c.z;if(Math.abs(h)>=1)return e.w=b.w,e.x=b.x,e.y=b.y,e.z=b.z,e;var k=Math.acos(h),m=Math.sqrt(1-h*h);if(Math.abs(m)<0.001)return e.w=0.5*(b.w+c.w),e.x=0.5*(b.x+c.x),e.y=0.5*(b.y+c.y),e.z=0.5*(b.z+c.z),e;h=Math.sin((1-f)*k)/m;f=Math.sin(f*k)/m;e.w=b.w*h+c.w*f;e.x=b.x*h+c.x*f;e.y=b.y*h+c.y*f;e.z=b.z*h+c.z*f;return e}; +e-m*f-n*h;c.x=t*p+e*-k+w*-n-u*-m;c.y=w*p+e*-m+u*-k-t*-n;c.z=u*p+e*-n+t*-m-w*-k;return c}};THREE.Quaternion.slerp=function(b,c,e,f){var h=b.w*c.w+b.x*c.x+b.y*c.y+b.z*c.z;if(Math.abs(h)>=1)return e.w=b.w,e.x=b.x,e.y=b.y,e.z=b.z,e;var k=Math.acos(h),m=Math.sqrt(1-h*h);if(Math.abs(m)<0.0010)return e.w=0.5*(b.w+c.w),e.x=0.5*(b.x+c.x),e.y=0.5*(b.y+c.y),e.z=0.5*(b.z+c.z),e;h=Math.sin((1-f)*k)/m;f=Math.sin(f*k)/m;e.w=b.w*h+c.w*f;e.x=b.x*h+c.x*f;e.y=b.y*h+c.y*f;e.z=b.z*h+c.z*f;return e}; THREE.Vertex=function(b){this.position=b||new THREE.Vector3};THREE.Face3=function(b,c,e,f,h,k){this.a=b;this.b=c;this.c=e;this.normal=f instanceof THREE.Vector3?f:new THREE.Vector3;this.vertexNormals=f instanceof Array?f:[];this.color=h instanceof THREE.Color?h:new THREE.Color;this.vertexColors=h instanceof Array?h:[];this.vertexTangents=[];this.materials=k instanceof Array?k:[k];this.centroid=new THREE.Vector3}; THREE.Face4=function(b,c,e,f,h,k,m){this.a=b;this.b=c;this.c=e;this.d=f;this.normal=h instanceof THREE.Vector3?h:new THREE.Vector3;this.vertexNormals=h instanceof Array?h:[];this.color=k instanceof THREE.Color?k:new THREE.Color;this.vertexColors=k instanceof Array?k:[];this.vertexTangents=[];this.materials=m instanceof Array?m:[m];this.centroid=new THREE.Vector3};THREE.UV=function(b,c){this.u=b||0;this.v=c||0}; THREE.UV.prototype={constructor:THREE.UV,set:function(b,c){this.u=b;this.v=c;return this},copy:function(b){this.u=b.u;this.v=b.v;return this},clone:function(){return new THREE.UV(this.u,this.v)}};THREE.Geometry=function(){this.id=THREE.GeometryCount++;this.vertices=[];this.colors=[];this.faces=[];this.faceUvs=[[]];this.faceVertexUvs=[[]];this.morphTargets=[];this.morphColors=[];this.skinWeights=[];this.skinIndices=[];this.boundingSphere=this.boundingBox=null;this.dynamic=this.hasTangents=!1}; @@ -432,7 +432,9 @@ f,{format:THREE.RGBFormat,magFilter:THREE.LinearFilter,minFilter:THREE.LinearFil new THREE.Vector3(0,0,-1));this.cameraPX.lookAt(this.cameraPXTarget);this.cameraNX.lookAt(this.cameraNXTarget);this.cameraPY.lookAt(this.cameraPYTarget);this.cameraNY.lookAt(this.cameraNYTarget);this.cameraPZ.lookAt(this.cameraPZTarget);this.cameraNZ.lookAt(this.cameraNZTarget)};this.updateCubeMap=function(b,e){var c=this.renderTarget;b.setFaceCulling("back","cw");e.scale.y=-1;e.position.y=2*this.height;e.updateMatrix();c.activeCubeFace=0;b.render(e,this.cameraPX,c);c.activeCubeFace=1;b.render(e, this.cameraNX,c);e.scale.y=1;e.position.y=0;e.updateMatrix();e.scale.x=-1;e.updateMatrix();c.activeCubeFace=2;b.render(e,this.cameraPY,c);e.scale.x=1;e.updateMatrix();b.setFaceCulling("back","ccw");c.activeCubeFace=3;b.render(e,this.cameraNY,c);e.scale.x=-1;e.updateMatrix();b.setFaceCulling("back","cw");c.activeCubeFace=4;b.render(e,this.cameraPZ,c);c.activeCubeFace=5;b.render(e,this.cameraNZ,c);e.scale.x=1;e.updateMatrix();b.setFaceCulling("back","ccw")}};THREE.FirstPersonCamera=function(){console.warn("DEPRECATED: FirstPersonCamera() is FirstPersonControls().")}; THREE.PathCamera=function(){console.warn("DEPRECATED: PathCamera() is PathControls().")};THREE.FlyCamera=function(){console.warn("DEPRECATED: FlyCamera() is FlyControls().")};THREE.RollCamera=function(){console.warn("DEPRECATED: RollCamera() is RollControls().")};THREE.TrackballCamera=function(){console.warn("DEPRECATED: TrackballCamera() is TrackballControls().")}; -THREE.FirstPersonControls=function(b,c){function e(b,e){return function(){e.apply(b,arguments)}}this.object=b;this.target=new THREE.Vector3(0,0,0);this.domElement=c!==void 0?c:document;this.movementSpeed=1;this.lookSpeed=0.005;this.noFly=!1;this.lookVertical=!0;this.autoForward=!1;this.activeLook=!0;this.heightSpeed=!1;this.heightCoef=1;this.heightMin=0;this.constrainVertical=!1;this.verticalMin=0;this.verticalMax=Math.PI;this.lastUpdate=(new Date).getTime();this.theta=this.phi=this.lon=this.lat= +THREE.CombinedCamera=function(b,c,e,f,h,k,m){THREE.Camera.call(this);this.cameraO=new THREE.OrthographicCamera(b/-2,b/2,c/2,c/-2,k,m);this.cameraP=new THREE.PerspectiveCamera(e,b/c,f,h);this.toPerspective()};THREE.CombinedCamera.prototype=new THREE.Camera;THREE.CombinedCamera.prototype.constructor=THREE.CoolCamera;THREE.CombinedCamera.prototype.toPerspective=function(){this.near=this.cameraP.near;this.far=this.cameraP.far;this.projectionMatrix=this.cameraP.projectionMatrix}; +THREE.CombinedCamera.prototype.toOrthographic=function(){this.near=this.cameraO.near;this.far=this.cameraO.far;this.projectionMatrix=this.cameraO.projectionMatrix};THREE.CombinedCamera.prototype.setFov=function(b){this.cameraP.fov=b;this.cameraP.updateProjectionMatrix();this.toPerspective()};THREE.CombinedCamera.prototype.setLens=function(b,c){c||(c=43.25);var e=2*Math.atan(c/(b*2));e*=180/Math.PI;this.setFov(e);return e}; +THREE.FirstPersonControls=function(b,c){function e(b,e){return function(){e.apply(b,arguments)}}this.object=b;this.target=new THREE.Vector3(0,0,0);this.domElement=c!==void 0?c:document;this.movementSpeed=1;this.lookSpeed=0.0050;this.noFly=!1;this.lookVertical=!0;this.autoForward=!1;this.activeLook=!0;this.heightSpeed=!1;this.heightCoef=1;this.heightMin=0;this.constrainVertical=!1;this.verticalMin=0;this.verticalMax=Math.PI;this.lastUpdate=(new Date).getTime();this.theta=this.phi=this.lon=this.lat= this.mouseY=this.mouseX=this.autoSpeedFactor=this.tdiff=0;this.mouseDragOn=this.freeze=this.moveRight=this.moveLeft=this.moveBackward=this.moveForward=!1;this.domElement===document?(this.viewHalfX=window.innerWidth/2,this.viewHalfY=window.innerHeight/2):(this.viewHalfX=this.domElement.offsetWidth/2,this.viewHalfY=this.domElement.offsetHeight/2,this.domElement.setAttribute("tabindex",-1));this.onMouseDown=function(b){this.domElement!==document&&this.domElement.focus();b.preventDefault();b.stopPropagation(); if(this.activeLook)switch(b.button){case 0:this.moveForward=!0;break;case 2:this.moveBackward=!0}this.mouseDragOn=!0};this.onMouseUp=function(b){b.preventDefault();b.stopPropagation();if(this.activeLook)switch(b.button){case 0:this.moveForward=!1;break;case 2:this.moveBackward=!1}this.mouseDragOn=!1};this.onMouseMove=function(b){this.domElement===document?(this.mouseX=b.pageX-this.viewHalfX,this.mouseY=b.pageY-this.viewHalfY):(this.mouseX=b.pageX-this.domElement.offsetLeft-this.viewHalfX,this.mouseY= b.pageY-this.domElement.offsetTop-this.viewHalfY)};this.onKeyDown=function(b){switch(b.keyCode){case 38:case 87:this.moveForward=!0;break;case 37:case 65:this.moveLeft=!0;break;case 40:case 83:this.moveBackward=!0;break;case 39:case 68:this.moveRight=!0;break;case 82:this.moveUp=!0;break;case 70:this.moveDown=!0;break;case 81:this.freeze=!this.freeze}};this.onKeyUp=function(b){switch(b.keyCode){case 38:case 87:this.moveForward=!1;break;case 37:case 65:this.moveLeft=!1;break;case 40:case 83:this.moveBackward= @@ -443,14 +445,14 @@ this.verticalMin)/(Math.PI-0)+this.verticalMin;b=this.target;c=this.object.posit e(this,this.onMouseUp),!1);this.domElement.addEventListener("keydown",e(this,this.onKeyDown),!1);this.domElement.addEventListener("keyup",e(this,this.onKeyUp),!1)}; THREE.PathControls=function(b,c){function e(b){if((b*=2)<1)return 0.5*b*b;return-0.5*(--b*(b-2)-1)}function f(b,e){return function(){e.apply(b,arguments)}}function h(b,e,c,f){var h={name:c,fps:0.6,length:f,hierarchy:[]},k,m=e.getControlPointsArray(),n=e.getLength(),A=m.length,F=0;k=A-1;e={parent:-1,keys:[]};e.keys[0]={time:0,pos:m[0],rot:[0,0,0,1],scl:[1,1,1]};e.keys[k]={time:f,pos:m[k],rot:[0,0,0,1],scl:[1,1,1]};for(k=1;k=0?b:b+m;b=this.verticalAngleMap.srcRange; c=this.verticalAngleMap.dstRange;var f=c[1]-c[0];this.phi=e(((this.phi-b[0])*(c[1]-c[0])/(b[1]-b[0])+c[0]-c[0])/f)*f+c[0];b=this.horizontalAngleMap.srcRange;c=this.horizontalAngleMap.dstRange;f=c[1]-c[0];this.theta=e(((this.theta-b[0])*(c[1]-c[0])/(b[1]-b[0])+c[0]-c[0])/f)*f+c[0];b=this.target.position;b.x=100*Math.sin(this.phi)*Math.cos(this.theta);b.y=100*Math.cos(this.phi);b.z=100*Math.sin(this.phi)*Math.sin(this.theta);this.object.lookAt(this.target.position)};this.onMouseMove=function(b){this.domElement=== document?(this.mouseX=b.pageX-this.viewHalfX,this.mouseY=b.pageY-this.viewHalfY):(this.mouseX=b.pageX-this.domElement.offsetLeft-this.viewHalfX,this.mouseY=b.pageY-this.domElement.offsetTop-this.viewHalfY)};this.init=function(){this.spline=new THREE.Spline;this.spline.initFromArray(this.waypoints);this.useConstantSpeed&&this.spline.reparametrizeByArcLength(this.resamplingCoef);if(this.createDebugDummy){var b=new THREE.MeshLambertMaterial({color:30719}),e=new THREE.MeshLambertMaterial({color:65280}), c=new THREE.CubeGeometry(10,10,20),m=new THREE.CubeGeometry(2,2,10);this.animationParent=new THREE.Mesh(c,b);b=new THREE.Mesh(m,e);b.position.set(0,10,0);this.animation=h(this.animationParent,this.spline,this.id,this.duration);this.animationParent.add(this.object);this.animationParent.add(this.target);this.animationParent.add(b)}else this.animation=h(this.animationParent,this.spline,this.id,this.duration),this.animationParent.add(this.target),this.animationParent.add(this.object);if(this.createDebugPath){var b= this.debugPath,e=this.spline,c=k(e,10),m=k(e,10),n=new THREE.LineBasicMaterial({color:16711680,linewidth:3});lineObj=new THREE.Line(c,n);particleObj=new THREE.ParticleSystem(m,new THREE.ParticleBasicMaterial({color:16755200,size:3}));lineObj.scale.set(1,1,1);b.add(lineObj);particleObj.scale.set(1,1,1);b.add(particleObj);m=new THREE.SphereGeometry(1,16,8);n=new THREE.MeshBasicMaterial({color:65280});for(i=0;i