Three.js – Working with Cameras

Three.js – Working with Cameras

0 63870
Three.js - Working with Cameras

Our lessons on webgl continue. Today we review Threejs cameras. Threejs library provides two different cameras: orthographic camera (OrthographicCamera) and perspective camera (PerspectiveCamera). The best way to understand the difference between these cameras – try every one of them with your own eyes.

PerspectiveCamera

This is camera with perspective projection.

PerspectiveCamera

PerspectiveCamera parameters:

Argument

Description

Fov

Field of view – this is part of scene that can be seen from the position of the camera. As you probably know, we, humans, have almost 180-degree field of view, while some birds might even have a complete 360-degree field of view.

However, for computers, we usually use the field of view between 60 and 90 degrees.

Aspect

The aspect ratio is ratio between the horizontal and vertical size of the area where we render the output. As we usually use the entire window, we will just use that ratio. The aspect ratio determines the difference between the horizontal field of view and the vertical field of view as you can see in the figure on the following page.

Ordinary value is window.innerWidth / window.innerHeight

Near

This property defines a min distance from the camera the Three.js renders the scene. Usually, this is a very small value, e.g. 0.1

Far

This property defines a max distance we see the scene from the position of the camera. If we set this as too low, a part of our scene might not be rendered; if we set it as too high, in some cases, it might affect the rendering performance. Normal value is between 500 and 2000

OrthographicCamera

This is camera with orthographic projection.

OrthographicCamera

OrthographicCamera parameters:

Argument

Description

left

Camera frustum left plane – you should see this as what is the left border of what will be rendered. If we set this value to -100, you won’t see any objects that are farther to the left.

right

Camera frustum right plane. Anything farther to the right won’t be rendered.

top

Camera frustum top plane – the top position to be rendered.

bottom

Camera frustum bottom plane – the bottom position to be rendered.

near

Camera frustum near plane – from this point, based on the position of the camera, the scene will be rendered.

Far

Camera frustum far plane – to this point, based on the position of the camera, the scene will be rendered.

As you can see, if we use the OrthographicCamera, all the elements are of the same size. Distance plays no role. This camera type is usually used in old 2D games (like Diablo (1 and 2), Civilization or SimCity).

OrthographicCamera 2

Now, let’s have a look how both cameras work:

PerspectiveCamera and OrthographicCamera cameras

To make a better (ordinary) perspective, we usually use the Perspective camera, it is more like the real world. If you would like to test it in your demo, here is switching camera function:

this.switchCamera = function() {
  if (camera instanceof THREE.PerspectiveCamera) {
    camera = new THREE.OrthographicCamera(
    window.innerWidth / - 16, window.innerWidth / 16,window.innerHeight / 16, window.innerHeight / - 16, -200, 500 );
    camera.position.x = 2;
    camera.position.y = 1;
    camera.position.z = 3;
    camera.lookAt(scene.position);
    this.perspective = "Orthographic";
  } else {
    camera = new THREE.PerspectiveCamera(45,
    window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.x = 120;
    camera.position.y = 60;
    camera.position.z = 180;
    camera.lookAt(scene.position);
    this.perspective = "Perspective";
  }
};

After you switch the camera, we usually need to focus the camera to a certain position, you can use lookAt function to do it:

camera.lookAt(new THREE.Vector3(x,y,z));

SIMILAR ARTICLES

Understanding Closures

0 24630

NO COMMENTS

Leave a Reply