PerspectiveCamera.html 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <h1>PerspectiveCamera &larr; <a href="javascript:goTo('cameras/Camera')">Camera</a> &larr; <a href="javascript:goTo('core/Object3D')">Object3D</a></h1>
  2. <div>Camera with perspective projection.</div>
  3. <h2>Example</h2>
  4. <code>var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
  5. scene.add( camera );
  6. </code>
  7. <h2>Constructor</h2>
  8. <h3>PerspectiveCamera( fov <a href="javascript:goTo('core/Number')">Number</a>, aspect <a href="javascript:goTo('core/Number')">Number</a>, near <a href="javascript:goTo('core/Number')">Number</a>, far <a href="javascript:goTo('core/Number')">Number</a> )</h3>
  9. <h2>Properties</h2>
  10. <h3>fov <a href="javascript:goTo('core/Number')">Number</a></h3>
  11. <div>Camera frustum vertical field of view.</div>
  12. <h3>aspect <a href="javascript:goTo('core/Number')">Number</a></h3>
  13. <div>Camera frustum aspect ratio.</div>
  14. <h3>near <a href="javascript:goTo('core/Number')">Number</a></h3>
  15. <div>Camera frustum near plane.</div>
  16. <h3>far <a href="javascript:goTo('core/Number')">Number</a></h3>
  17. <div>Camera frustum far plane.</div>
  18. <h2>Methods</h2>
  19. <h3>setLens( focalLength <a href="javascript:goTo('core/Number')">Number</a>, frameSize <a href="javascript:goTo('core/Number')">Number</a> )</h3>
  20. <div>
  21. Uses focal length (in mm) to estimate and set FOV 35mm (fullframe) camera is used if frame size is not specified.<br />
  22. Formula based on <a href="http://www.bobatkins.com/photography/technical/field_of_view.html" target="_blank">http://www.bobatkins.com/photography/technical/field_of_view.html</a>
  23. </div>
  24. <h3>setViewOffset( fullWidth <a href="javascript:goTo('core/Number')">Number</a>, fullHeight <a href="javascript:goTo('core/Number')">Number</a>, x <a href="javascript:goTo('core/Number')">Number</a>, y <a href="javascript:goTo('core/Number')">Number</a>, width <a href="javascript:goTo('core/Number')">Number</a>, height <a href="javascript:goTo('core/Number')">Number</a> )</h3>
  25. <div>
  26. Sets an offset in a larger frustum. This is useful for multi-window or multi-monitor/multi-machine setups.<br /><br />
  27. For example, if you have 3x2 monitors and each monitor is 1920x1080 and the monitors are in grid like this:<br /><br />
  28. <pre>+---+---+---+
  29. | A | B | C |
  30. +---+---+---+
  31. | D | E | F |
  32. +---+---+---+
  33. </pre>
  34. then for each monitor you would call it like this:<br /><br />
  35. <code>var w = 1920;
  36. var h = 1080;
  37. var fullWidth = w * 3;
  38. var fullHeight = h * 2;
  39. // --A--
  40. camera.setOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
  41. //--B--
  42. camera.setOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
  43. //--C--
  44. camera.setOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
  45. //--D--
  46. camera.setOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
  47. //--E--
  48. camera.setOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
  49. //--F--
  50. camera.setOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );
  51. </code><br />
  52. Note there is no reason monitors have to be the same size or in a grid.
  53. </div>
  54. <h3>updateProjectionMatrix()</h3>
  55. <div>
  56. Updates camera's projection matrix. Must be called after change of parameters.
  57. </div>
  58. <h2>Source</h2>
  59. <div><a href="https://github.com/mrdoob/three.js/blob/master/src/cameras/PerspectiveCamera.js" target="_blank">src/cameras/PerspectiveCamera.js</a></div>