Camera and Renderer

[00:01] Next in the line, we're going to add the camera. And for the camera, you can think of it like a movie set where you can have multiple cameras and you can switch between them. But most of the time using 3DS, we're just going to use one camera. There are also different types of them, but we are gonna use one that imitates how real cameras work and also how our vision work, which is The new perspective Camera So we're gonna import it from 3 and this accepts the field of view or the FOV. So the description is like the camera first room vertical field of view but I like to describe like how large your vision angle is.

[00:51] If you have a very large angle you will be able to see in every direction at once, but a little bit of distortion, while if you have a small angle you're gonna focus a little bit more. So things will look a little bit something So the fillet build normally is between 45 and I don't know like 60 The default I think is 50 Yes, so we're gonna use something like 60. Okay? The second parameter is the aspect ratio. And in most cases, aspect ratio is just the width of the canvas divided by the height.

[01:27] But since we haven't decided yet, We're gonna hard code the numbers for now. So I'm gonna use 400 and 300 here So it's gonna be 400 wide and 300 of height Okay. So now we're going to do the exactly the same as we did with the cube, we need to add it to the scene. So scene, add camera. Okay, we hit save.

[01:55] We still don't see anything because we need to add the render. Last but not least, we're going to create the renderer. So, to do that, we're going to do const renderer, and we're going to use a class called WebGLRenderer. We're going to out-import it from tree, And the reason it's called WebGL is because it's using the API, the low-level 3D graphics API of the browser, call it the same. It's based on OpenGL, so it's WebGL render.

[02:31] We need to pass an object with some parameters, but the most important one is the canvas It's gonna complain now because we haven't created or retrieved the canvas yet So we're gonna do that here the same way. We're gonna use document query selector and we're gonna pass the ID. So here, WebGL, exactly. And We are going to check if we actually found it. So we're gonna do if there is no canvas, so we couldn't find it.

[03:09] We're gonna throw a new error. Okay. No canvas found. So hit save. And The first thing that we're gonna do with the render because the renderers job is to render I bet you didn't see that coming.

[03:30] But we simply ask the render to render our scene from the camera point of view. So we need to set first the same aspect ratio as the camera. To do that we're gonna use setSize and then dataSetsWidth and height. And then we're gonna tell it, hey, please render, and it sets two parameters, which is you're gonna render this scene from the point of view of this camera. If we hit save, now we're going to see a square, well like a 400 by 300 rectangle here.

[04:12] And if we go to the DevTools, let's see what's actually here. We have a canvas and you can see that the render is doing its work or it's mounted correctly because you're gonna see a property called data engine with 3DS and the version of it. So with this we're sure that we have our rendering going. But didn't we add a cube to the scene? Why don't we see it yet?

[04:42] This is one of the most common mistakes that beginners do when they're trying 3DS the first time. And actually it takes a long time to debug it and realize what it is, so I'm going to save you that time and explain to you. The reason we don't see anything yet is because the camera is by default in the center of the scene in the coordinate 0 0 0 similar to what our cube is so we're basically seeing the cube from inside but by default to save performance the materials doesn't render from inside only outside. So it has a really easy solution we're gonna take the camera and we're gonna take advantage of this to understand how we can modify some properties. So we're gonna set the position of the camera and we're gonna check what does it need.

[05:39] It needs a value for the x-axis, one for the y-axis and one for the z-axis. So some numbers. We're gonna do like 3 3 3 and then really important we are going to take the camera and tell please look at the center of the scene where a cube is. So we're gonna hit save and now finally we can see our cube of color teal in the middle of the scene.