20

This is how a camera is instantiated:

var camera = new THREE.PerspectiveCamera(
    VIEW_ANGLE,
    ASPECT,
    NEAR,
    FAR
);

What do these values mean?

3
  • 1
    refer to the answer I gave on your more recent question - its the near and far clipping planes - stackoverflow.com/questions/10719403/…
    – Neil
    May 23, 2012 at 13:26
  • That's cool, now, those other values? :)
    – corazza
    May 23, 2012 at 21:41
  • Bump! What is far and near exactly? I am assuming (z<NEAR OR z>FAR) means it is not shown on the screen, but that is just an assumption. FAR being a problem is understandable in terms of loading speeds, but NEAR? Clipping issue lol? May 13, 2013 at 2:50

4 Answers 4

36

I was wondering the same thing so I looked it up, it is a view "frustum".

I'll paste here a code comment I wrote in a recent project because it sums it up nicely IMHO.

// "What the f*** is a frustum?" you ask. Well I did.
// Think about it as a truncated pyramid. The tip is the camera. From a certain
// point "down" the pyramid (the "near plane"), stuff can be seen on-screen.
// After the "base" of the pyramid (the "far plane"), stuff is too far to be
// seen. Stuff outside the pyramid is off-screen too. There is also the "aspect
// ratio" (the rectangle that makes up the pyramid's base, so this value is
// width/height) and the "field of view" (think of it as a lens or something,
// it distorts the pyramid so there's more objects on screen - it is set in
// degrees and 45° is more-or-less a "natural" perspective. The bigger the
// number, the more "perspective" there is).

                                         Wikipedia image

0
18

The first param is FOV means field of view, imagine a camera on a tripod, if you change lens to wide angle you get a higher FOV. Try to imagine a cone coming out from the camera, it can only see objects in that area.

ASPECT means aspect ratio, a widescreen TV is 16/9 and old ones were 4/3, usually just give it the screen width/height or the dims of a DIV you would like three.js to use.

18

I found this tutorial very useful for understanding all the camera parameters, and the difference between PerspectiveCamera and OrthographicCamera.

PerspectiveCamera

  • 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

  • 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 maximum top position to be rendered.

  • Bottom (Camera frustum bottom plane) The bottom position to be rendered.

  • Near (Camera frustum near plane) - From this point on, based on the position of the camera, the scene will be rendered.

  • Far (Camera frustum far plane) - The furthest point, based on the position of the camera, to which the scene will be rendered.

The following picture should be very illustrative:

enter image description here

The main difference between the two camera modes is that in the OrthographicCamera distance plays no role, so all the elements are of the same size, as you can see in the case of the red and yellow ball.

Finally here is some code you can use to switch from one camera to the other:

this.switchCamera = function(SCENE_WIDTH, SCENE_HEIGHT) {
  if (camera instanceof THREE.PerspectiveCamera) {
    camera = new THREE.OrthographicCamera( SCENE_WIDTH / - 2, SCENE_WIDTH / 2, SCENE_HEIGHT / 2, SCENE_HEIGHT / - 2, 0.1, 1000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = -1;
    camera.lookAt(scene.position);
    this.perspective = "Orthographic";
  } else {
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = -1;
    camera.lookAt(scene.position);
    this.perspective = "Perspective";
  }
};

Notes:

  • The function camera.lookAt(scene.position) orients the camera to where the scene is located, so it is visible.
  • Units in three.js are SI units, so the values of left,right,top,bottom should not assumed to be pixels.
  • The aspect ratio of the camera's frustum should normally match the canvas' aspect ratio.
  • SCENE_WIDTH, SCENE_HEIGHT, can be determined through the geometries that are added in the scene. The orthographic frustum could be much larger than the scene but it wouldn't be very parsimonious.

Useful links:

4
  • 1
    I think you need to read this answer and correct your post. May 11, 2016 at 19:11
  • 1
    (1) You are passing pixel units into your OrthographicCamera constructor. The units should be world units. (2) Your near clip plane is behind the camera because you have specified a negative value for near. May 11, 2016 at 20:19
  • 1
    No it is not correct. I would suggest you change it so you do not mislead users. Also, three.js r.76 units are arbitrary. They are not required to be SI units. May 11, 2016 at 21:33
  • 1
    All the corrections suggested have been now incorporated! Thanks for your feedback.
    – Matteo
    May 13, 2016 at 15:59
0

fov: Camera frustum vertical field of view.

aspect: Camera frustum aspect ratio.

near: Camera frustum near plane.

far: Camera frustum far plane.

On these pages there some image for the FOV, NEAR plane, anmd FAR plane.

https://threejsfundamentals.org/threejs/lessons/resources/frustum-3d.svg

https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/ViewFrustum.svg/440px-ViewFrustum.svg.png

https://threejsfundamentals.org/threejs/lessons/threejs-cameras.html https://en.wikipedia.org/wiki/Viewing_frustum

This is the aspect ratio.

https://en.wikipedia.org/wiki/Aspect_ratio_(image)

This is the official docs.

https://threejs.org/docs/#api/en/cameras/PerspectiveCamera

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.