CombinedCamera.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. /**
  2. * @author zz85 / http://twitter.com/blurspline / http://www.lab4games.net/zz85/blog
  3. *
  4. * A general perpose camera, for setting FOV, Lens Focal Length,
  5. * and switching between perspective and orthographic views easily.
  6. * Use this only if you do not wish to manage
  7. * both a Orthographic and Perspective Camera
  8. *
  9. */
  10. THREE.CombinedCamera = function ( width, height, fov, near, far, orthoNear, orthoFar ) {
  11. THREE.Camera.call( this );
  12. this.fov = fov;
  13. this.left = -width / 2;
  14. this.right = width / 2
  15. this.top = height / 2;
  16. this.bottom = -height / 2;
  17. // We could also handle the projectionMatrix internally, but just wanted to test nested camera objects
  18. this.cameraO = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, orthoNear, orthoFar );
  19. this.cameraP = new THREE.PerspectiveCamera( fov, width / height, near, far );
  20. this.zoom = 1;
  21. this.toPerspective();
  22. var aspect = width/height;
  23. };
  24. THREE.CombinedCamera.prototype = Object.create( THREE.Camera.prototype );
  25. THREE.CombinedCamera.prototype.toPerspective = function () {
  26. // Switches to the Perspective Camera
  27. this.near = this.cameraP.near;
  28. this.far = this.cameraP.far;
  29. this.cameraP.fov = this.fov / this.zoom ;
  30. this.cameraP.updateProjectionMatrix();
  31. this.projectionMatrix = this.cameraP.projectionMatrix;
  32. this.inPerspectiveMode = true;
  33. this.inOrthographicMode = false;
  34. };
  35. THREE.CombinedCamera.prototype.toOrthographic = function () {
  36. // Switches to the Orthographic camera estimating viewport from Perspective
  37. var fov = this.fov;
  38. var aspect = this.cameraP.aspect;
  39. var near = this.cameraP.near;
  40. var far = this.cameraP.far;
  41. // The size that we set is the mid plane of the viewing frustum
  42. var hyperfocus = ( near + far ) / 2;
  43. var halfHeight = Math.tan( fov / 2 ) * hyperfocus;
  44. var planeHeight = 2 * halfHeight;
  45. var planeWidth = planeHeight * aspect;
  46. var halfWidth = planeWidth / 2;
  47. halfHeight /= this.zoom;
  48. halfWidth /= this.zoom;
  49. this.cameraO.left = -halfWidth;
  50. this.cameraO.right = halfWidth;
  51. this.cameraO.top = halfHeight;
  52. this.cameraO.bottom = -halfHeight;
  53. // this.cameraO.left = -farHalfWidth;
  54. // this.cameraO.right = farHalfWidth;
  55. // this.cameraO.top = farHalfHeight;
  56. // this.cameraO.bottom = -farHalfHeight;
  57. // this.cameraO.left = this.left / this.zoom;
  58. // this.cameraO.right = this.right / this.zoom;
  59. // this.cameraO.top = this.top / this.zoom;
  60. // this.cameraO.bottom = this.bottom / this.zoom;
  61. this.cameraO.updateProjectionMatrix();
  62. this.near = this.cameraO.near;
  63. this.far = this.cameraO.far;
  64. this.projectionMatrix = this.cameraO.projectionMatrix;
  65. this.inPerspectiveMode = false;
  66. this.inOrthographicMode = true;
  67. };
  68. THREE.CombinedCamera.prototype.setSize = function( width, height ) {
  69. this.cameraP.aspect = width / height;
  70. this.left = -width / 2;
  71. this.right = width / 2
  72. this.top = height / 2;
  73. this.bottom = -height / 2;
  74. };
  75. THREE.CombinedCamera.prototype.setFov = function( fov ) {
  76. this.fov = fov;
  77. if ( this.inPerspectiveMode ) {
  78. this.toPerspective();
  79. } else {
  80. this.toOrthographic();
  81. }
  82. };
  83. // For mantaining similar API with PerspectiveCamera
  84. THREE.CombinedCamera.prototype.updateProjectionMatrix = function() {
  85. if ( this.inPerspectiveMode ) {
  86. this.toPerspective();
  87. } else {
  88. this.toPerspective();
  89. this.toOrthographic();
  90. }
  91. };
  92. /*
  93. * Uses Focal Length (in mm) to estimate and set FOV
  94. * 35mm (fullframe) camera is used if frame size is not specified;
  95. * Formula based on http://www.bobatkins.com/photography/technical/field_of_view.html
  96. */
  97. THREE.CombinedCamera.prototype.setLens = function ( focalLength, frameHeight ) {
  98. if ( frameHeight === undefined ) frameHeight = 24;
  99. var fov = 2 * THREE.Math.radToDeg( Math.atan( frameHeight / ( focalLength * 2 ) ) );
  100. this.setFov( fov );
  101. return fov;
  102. };
  103. THREE.CombinedCamera.prototype.setZoom = function( zoom ) {
  104. this.zoom = zoom;
  105. if ( this.inPerspectiveMode ) {
  106. this.toPerspective();
  107. } else {
  108. this.toOrthographic();
  109. }
  110. };
  111. THREE.CombinedCamera.prototype.toFrontView = function() {
  112. this.rotation.x = 0;
  113. this.rotation.y = 0;
  114. this.rotation.z = 0;
  115. // should we be modifing the matrix instead?
  116. this.rotationAutoUpdate = false;
  117. };
  118. THREE.CombinedCamera.prototype.toBackView = function() {
  119. this.rotation.x = 0;
  120. this.rotation.y = Math.PI;
  121. this.rotation.z = 0;
  122. this.rotationAutoUpdate = false;
  123. };
  124. THREE.CombinedCamera.prototype.toLeftView = function() {
  125. this.rotation.x = 0;
  126. this.rotation.y = - Math.PI / 2;
  127. this.rotation.z = 0;
  128. this.rotationAutoUpdate = false;
  129. };
  130. THREE.CombinedCamera.prototype.toRightView = function() {
  131. this.rotation.x = 0;
  132. this.rotation.y = Math.PI / 2;
  133. this.rotation.z = 0;
  134. this.rotationAutoUpdate = false;
  135. };
  136. THREE.CombinedCamera.prototype.toTopView = function() {
  137. this.rotation.x = - Math.PI / 2;
  138. this.rotation.y = 0;
  139. this.rotation.z = 0;
  140. this.rotationAutoUpdate = false;
  141. };
  142. THREE.CombinedCamera.prototype.toBottomView = function() {
  143. this.rotation.x = Math.PI / 2;
  144. this.rotation.y = 0;
  145. this.rotation.z = 0;
  146. this.rotationAutoUpdate = false;
  147. };