Three.js – Orthographic camera

by

The pattern for instantiating an orthographic camera in three.js is:

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far );

where width and height are the width and height of the camera’s cuboid-shaped frustum measured in world-space units.

near and far are the world-space distances to the near and far planes of the frustum. Both near and far should be greater than zero.

To prevent distortion, you will typically want the aspect ratio of the orthographic camera ( width / height ) to match the aspect ratio of the render’s canvas. (see *Note below)

It is unfortunate that many of the three.js examples pass window.innerWidth and window.innerHeight as args to this constructor. Doing so only makes sense if the orthographic camera is used for rendering to a texture, or if the world units for your orthographic scene are in pixels.

*Note: Actually, the camera aspect ratio should match the aspect ratio of the renderer’s viewport. The viewport can be a sub-region of the canvas. If you do not set the renderer’s viewport directly using renderer.setViewport(), the viewport will be the same size as the canvas, and hence have the same aspect ratio as the canvas.

three.js r.73

More Related Contents:

  1. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  2. Converting World coordinates to Screen coordinates in Three.js using Projection
  3. Three JS – Find all points where a mesh intersects a plane
  4. Three.js Projector and Ray objects
  5. How to render clipped surfaces as solid objects
  6. Three.js add an object to a group but keep global position/rotation/scale as it was
  7. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  8. How to Fit Camera to Object
  9. THREE.js Ray Intersect fails by adding div
  10. How to rotate a 3D object on axis three.js?
  11. Image manipulation and texture mapping using HTML5 Canvas?
  12. Transparent background with three.js
  13. Using textures in THREE.js
  14. Three.js / WebGL – transparent planes hiding other planes behind them
  15. Is it possible to enable unbounded number of renderers in THREE.js?
  16. Rendering a transparent shell
  17. How do you save an image from a Three.js canvas?
  18. Any way to get a bounding box from a three.js Object3D?
  19. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  20. Three JS Pivot point
  21. three.js transparent object occlusion
  22. How to change face color in Three.js
  23. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  24. How to get the global/world position of a child object?
  25. Orthographic camera and selecting objects with raycast
  26. catch the click event on a specific mesh in the renderer
  27. Antialiasing not working in Three.js
  28. 3D point rotation algorithm
  29. Threejs: assign different colors to each vertex in a geometry
  30. Switch threejs controls ( from TrackBall to FlyControls and vice versa)

Leave a Comment