Using an orthographic camera

In most cases, you'll use THREE.PerspectiveCamera to render your scene. With such a camera, the result is a scene with a realistic-looking perspective. Three.js provides an alternative camera with THREE.OrthographicCamera. This camera uses an orthographic projection to render the scene. With this type of projection, all objects have the same size regardless of their distance to the camera. This is in contrast to THREE.PerspectiveCamera, where objects that are further away from the camera appear smaller. This was used often for fake 3D in games such as the Sims or older versions of SimCity (image taken from http://glasnost.itcarlow.ie/~powerk/GeneralGraphicsNotes/projection/projection_images/iosmetric_sim_city.jpg).

In this recipe, we'll show you how to configure THREE.OrthographicCamera so that you can create this fake 3D effect for your own scenes.

Getting ready

For this recipe, the only object from Three.js we use is THREE.OrthographicCamera. This camera is available...