Three.js Perspective Camera – Interactive 3D Graphics

July 31, 2019 posted by


Before explaining how projection works, let’s talk about how the perspective camera is set in 3Js. It’s similar to the Orthographic Camera, in fact, the creation call has few parameters. We know what the last three are. The aspect ratio is the image width divided by height, followed by the near and far planes. Remember the view frustum? It’s back at last. The near and far distances are measured from the tip of the pyramid, where the camera is placed, down a central axis. Back when I was a young man, we called near and far by the names hither and yon, which I think is more poetic. You’ll still occasionally see the terms hither and yon used in products, so keep an eye out. The first argument for the perspective camera is the field of view. This is the angle between the top and bottom planes of the view pyramid. Notice that in 3JS, this number is specified in degrees, unlike many other angles, which use radians. The field of view along with the aspect ratio fully described the locations of the four sides of the pyramid. For the orthographic camera, we define the location of every side of our volume box. Here the view is assumed to be symmetric around the central axis. In other words, instead of, a top an a bottom value, we need just a single angle describing both, the field of view. Same thing with the right an left, the aspect ratio along with the angle is enough. This is 3.js’s way of doing things, an 99.9% of the time it’s what you want. That said, it’s entirely possible to specify each side of the pyramid. And webgl itself has a frustum that does just this. If you later change values on the camera itself, such as the field of view near or far planes, in 3js you need to call camera, update projection matrix in order to have these changes take effect. For most demos these camera parameters are usually set once on creation and rarely touched, so 3js doesn’t spend any time checking them each frame. If you change these values while running your program, calling update projection matrix has three js evaluate these parameters and form a new projection matrix.

3 Comments

3 Replies to “Three.js Perspective Camera – Interactive 3D Graphics”

  1. Simon says:

    Thank you for this video. It was really helpful.

  2. Ariel Gimenez says:

    I would really appreciate it if you make a video showing the procedure so that intellicence works in VScode with Three.Js

  3. sk SnakeKing says:

    This explained a lots, thanks, lots of thanks

Leave a Comment

Your email address will not be published. Required fields are marked *