Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:9Length:52 minutes
Three js beyond the basics 400x277
  • Overview
  • Transcript

2.6 Cameras

So far, we have been using a “Perspective Camera” for all of our scenes. In this lesson, we are going to take a look at another type of camera called an “Orthographic Camera”.

Useful Links

2.6 Cameras

Hello, and welcome back. In this lesson, I wanna talk about a couple different types of cameras that we can create in Three.js. And again, there are multiple cameras. We're just gonna focus on two types of cameras in this lesson. The first type of camera, and this is the type of camera we've been using all along, is the perspective camera. The perspective camera works like a camera in real life. It just points at objects, and if objects are further away, those objects are gonna look smaller. So we have a bunch of cubes here in our scene. And they're all the same size, but the ones that are closer to the camera look bigger just like you would expect them to. And there are a number of things that we can pass into our prospective camera, the first thing is the field of view, and this is in degrees. So if you have a larger number here, it's gonna act more like a wide angle lens and you're gonna be able to see more of what's right in front of you. It'll give you basically more peripheral vision if you will. So if I bring that up to maybe 100, then we're gonna be able to see more of those cubes because we have a wider lens. If we bring it down to a smaller number, suggest 20, it's gonna work like a long lens and we'll be able to see only the things that are directly in front of us. So I'm gonna go back to 75 there. Then we have our aspect ratio, which again is just the width and height of your viewable area. And you can change that aspect ratio to whatever you want. But if it's not the same as the width and height of your viewable area, then it's going to look skewed. So if I were to set this for some reason to, let's say 12/2, then everything's gonna be kind of smushed. So let's just change that back to our aspect variable. And then we have our near and far values, which again we covered all of these in our introductory course. So we're not gonna go too much in depth on that, but this determines how close and how far away objects can be before they are no longer rendered by the camera. So if something is further than 1,000 units away, we're not gonna be able to see it on the camera. And so here I'm just setting the position in the X and Y rotation of our camera to kinda give us a view of all of our squares. So that's the perspective camera. Again, the main thing I wanna point out there is that things that are close are going to appear large. Things that are far away are going to appear smaller. The orthographic camera, on the other hand, is going to work a little bit different because everything is gonna be the exact same size. Even shapes that are far away are going to appear the same size. So let's take a look at that, I'm gonna comment out our perspective camera here. And we'll remove the comments on our orthographic camera, and there we go. So this is the exact same scene, I haven't changed anything on the scene. We still have a big grid of cubes. But the difference is, with our orthographic camera, they're all the same size. So even these cubes that are further away, they still take up the same amount of space on the screen as the ones that are up close. And the values that we pass into this orthographic camera are also a little bit different. We have a left and right value first, and then a top and bottom value after that, and then we have our near and far value, just like we did with our perspective camera. So, our left and right, and top and bottom values are gonna determine how much of this scene we actually see. So if we change our left and right values to negative 5 and positive 5, then we can see less of the scene. You'll also notice that this kind of acts as an aspect ratio for our camera a little bit, because now our cubes look like they're squashed. And if we bring our top to 5 and our bottom to -5, then we get our aspect ratio back. They still look like cubes, but we can see a lot less of the scene than what we could see before. So I'm gonna undo those and get us back to where we were before, and those are the main differences. And you might see a lot of video games that use an orthographic type of view, where the things that are far away are just as large as the things that are close up. Now but those are a couple of different types of cameras. Again, as always, you can take a look at the documentation to see what other cameras there are, as well as what other options you have with those cameras. So thank you for watching, and I'll see you in the next lesson.

Back to the top