React Three Fiber Camera's Explained

cameras one of the required elements to bring 3d to the web by now most people know how to use their own camera but as a 3d web developer you might not know everything about cameras in 3d scenes in this video i will discuss the two most used cameras the perspective and the orthographic camera let's start with the perspective camera this camera is very similar to the eye and therefore the most easy one to understand it is defined by the field of view the aspect ratio a near value and a far value the first one field of view determines the vertical angle that the camera is able to register as you can see when the angle gets smaller you will see less content without moving or zooming the camera in reactory fiber when changing the field of view it will look somewhat similar to this as you can see the sides become very stretched because there is more content to show in the same display this is very different from moving the camera to another position which looks like this here you can see all objects keep their original width and height the second value that defines the perspective camera is the aspect ratio this value describes the width and height proportion of the display to calculate this value you have to divide the width by the height some of the commonly used aspect ratios are one by one 4x3 14x9 and 16x9 this last one is also the aspect ratio of a by 1080 pixel monitor in 3gs the actual value that you pass has to be the width divided by the height which is 1.77 in this case the third value is the near value this indicates from what distance the camera should register other objects anything closer to the camera than the near value won't be visible as you can see here at a certain point the cube starts to disappear because the distance to the camera is smaller than the near value if you look closely you can also see the near line moving on the left display the fourth and last value is the far value which is very similar to the near value but instead it indicates until what distance it should render objects any object further away won't be rendered anymore which you can see here because i'm changing the far value a part of the cube is too far away at certain moment which is why only the closest part gets displayed after applying all those four values you will get an area which is called the view frustum the camera will display anything inside of the viewfrustum but nothing out of it so now that we understand how the perspective camera works let's open up the editor i added the orbit controls some lightning and the double side parameter to the base code which i added a link to in the description so that you can go along in a previous video i mentioned that the canvas element in react3 fiber automatically generates a camera for us and sets it as the default perspective camera here in the documentation you can see it's possible to change the default camera by adding a camera or orthographic property to the canvas let's change the position to get a bit closer to the cube unfortunately because those properties only get picked up on initial render we will have to restart the browser for all changes we make in the canvas element now let's change the field of view the default is 60 degrees so let's change it to 90 to see that it actually increases the area we can see let's also add a near and far which are crossing through the cube so that you can see that it cuts off slices of the cube that are too close or too far away okay so now you know how to edit the camera but without seeing the view thruster it's very difficult to know exactly what's inside of the camera and what is not therefore you can use the camera helper let's create one using a separate perspective camera so that we are able to actually see it with our own camera add the camera helper to the three scene and you will see the camera helper pops up i added a group around it which is basically a wrapper to get the cube inside of the viewfrustrm of the camera this means that if we would change our parameter values to the ones of the camera helper we would see exactly the same so let's give that a try and change the position fill a few near and far value to the same values as above and as soon as i refresh the camera is now exactly at the same point as the camera helper now that's everything about perspective cameras for now but i mentioned that i would also explain the orthographic camera and there's one big difference between the two and that is that the perspective camera displays objects that are further away smaller than objects that are nearby just like our own eyes do but with an orthographic camera every object will keep its own size to set up an orthographic camera you will need a left right top and bottom value instead of the field of view and aspect ratio those values will determine what the view frustum is going to look like now let's create an orthographic camera ourselves by removing the old properties and adding the orthographic property to the canvas element itself we also need to specify the left right top and bottom and let's add a zoom so that the cube is well visible in this screen this works and as you might have seen the lines are now exactly the same height while the perspective camera would have a bigger line in the front a good example of where the autographic camera was used is the crossy road game where all the tiles needed to be exactly the same size besides the two cameras we discussed in this video there are a few more which i would recommend you to read the documentation of so that you are aware of what they are being used for and that's all for now so please consider subscribe and like the video if you did the code will be available on github which i linked in the description and i will see you next time ciao

Channel: Threeveloper

Views: 11,101

Keywords: three.js, react-three-fiber, r3f, @react-three/fiber, @react-three/drei, 3D, 3D website, tutorial, React, TypeScript, TailwindCSS, Vite, unique website, teaching, 3D experience, cameras, perspective, orthographic, field of view, view frustum, aspect ratio, 3D camera

Id: Isr-hIveUK0

Length: 5min 48sec (348 seconds)

Published: Fri Apr 08 2022