Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Camera arguments in Three.js

This is how a camera is instantiated:

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

What do these values mean?

like image 735
corazza Avatar asked May 23 '12 08:05

corazza


People also ask

What is camera in three js?

The most common camera in three. js and the one we've been using up to this point is the PerspectiveCamera . It gives a 3d view where things in the distance appear smaller than things up close. The PerspectiveCamera defines a frustum. A frustum is a solid pyramid shape with the tip cut off.

What is a Orthographic camera?

Camera that uses orthographic projection. In this projection mode, an object's size in the rendered image stays constant regardless of its distance from the camera. This can be useful for rendering 2D scenes and UI elements, amongst other things.

What is perspective camera?

The perspective camera model uses the algebra of the projective space to describe the way in which space points are mapped into an image plane. From: Feature Extraction & Image Processing for Computer Vision (Third Edition), 2012.


2 Answers

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

like image 147
Camilo Martin Avatar answered Oct 09 '22 11:10

Camilo Martin


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.

like image 31
Neil Avatar answered Oct 09 '22 11:10

Neil