Three.js Tutorial For Absolute Beginners

if you want to start creating 3d content on your web pages and you don't know how or where to begin you're on the right place because in this tutorial i'll help you to get a good grasp of the fundamental parts of the widely known 3d library 3js this is by far the most downloaded 3d library as it is commonly used by professional devs around the world to create 3d interactive content in browser games with almost 400k downloads weekly on npm before we start make sure to watch the previous video if you don't know what is webgl or what is the relationship between it in 3gs link in the description below and without any further ado let's get started the first thing we need to do is to create the projects folder in its package file then we are going to install a bundler using a bundler is not mandatory but i highly suggest you to do so because it makes the project's organization way cleaner and easier to maintain in the long run the bundler i'm going to install is parcel 2 which requires zero configuration but keep in mind that you could face a few problems with this version i've used it here to make the tutorial as future proof as possible if you want to use a more stable release though you can install the previous version or maybe use a different bundler like webpack that said to install parcel 2 you can either do it only for this project by typing the following command mpm install parcel double dash save dev or install it globally to be able to use it in any other project without having to install it another time by typing this command instead npm install parcel g the installation will take some time so let's do other things in the meantime first let's create a source folder which will contain the app development assets like the images html javascript and 3d files something important to keep in mind is that we need to use the type attribute and set its value to module if we know we are going to use the import statement in the javascript file we are linking to so since i know we are going to do that i'm adding it here if you chose to use the version 1 of parcel this will generate an error so don't add it now that our project files are ready let's install 3js by typing the following command mpm install 3 that done let's type some code first and foremost we need to create a namespace and let's name it 3 and import everything into it then we need to create an instance of the webgl renderer you can think of the renderer as a tool that 3gs uses to allocate a space on a web page where we can add and animate all of the 3d stuff that we are going to make later on having said that to set the size of that space we need to call the set size method and pass the width and height as arguments and here i want that space to take all over the page by using the window inner width and height properties the next thing we need to do is to inject that space we've just created which is basically a canvas element into the page now we need to type the following command in order to make parcel bundle the files and refresh the page automatically whenever we save any update in our code notice that a dist folder has been created the moment i pressed enter and that folder will hold the distribution version of the app including any asset that is located in the src folder and used in the code to see the result of the few lines we type it i'll push ctrl plus left click on the url provided by the server that parcel has started and there we go we got our canvas ready however notice that we have some unwanted scrollable vertical horizontal space which is added by default by chrome to get rid of it we need to set the css margin of the body element to zero before we continue with code let's understand how 3gs works first when we talk about 3d in general we are actually referring to a coordinate system composed of three axes furthermore we get values from these axes to define the coordinates aka location of a point in the 3d space the first axis is known as the x-axis and it represents the horizontal placement of a point on the graph the left side contains negative values while the right side contains positive values the second axis is known as the y-axis and it represents the vertical placement of a point on the graph the bottom side contains negative values while the top side contains positive values the third axis is known as the z-axis and it represents depth going from zero to the front means negative values while going backward from zero means positive values so again that's how 3d works in general it's not something specific to 3gs now let's talk about placing elements on the html canvas in 3gs and let's begin with a simple analogy say we want to record a show obviously we need the right place where to record aka the scene we also need a camera then we need to add the components after preparing them outside the scene and what i mean by components here is the lights scenes objects and the actors and what i mean by preparations is to choose the right lens for the camera and the right objects for the background etc these exact same things need to be done using 3gs we need to have a theme by creating an instance of the scene class then we need to choose the right type of camera and create an instance of it we have two types and i'll get back to this subject in a moment once these two essential parts are ready we can then introduce elements to the scene now back to cameras as i said there are two types of them the first type is referred to as perspective camera it is basically the same as real life cameras to create a prospective camera and 3js we need four values the first one is the vertical field of view it is the maximum angle of what can be seen through the length of the camera the second value is the aspect ratio this one represents the proportion of the width and height of the image captured by the camera and it is usually calculated by dividing the canvas width by the canvas height the near and far clipping planes these two represent the bounds of what can be seen and thus rendered anything in the scene that has a position closer to the camera than the near clipping plane won't be rendered in addition to that anything further than the far clipping plane won't be rendered the second type of cameras is the orthographic camera an orthographic camera is used to render 2d scenes because depth doesn't count in this case i'll make a comparison between the two types of cameras in just a second but let's continue with the components of an autographed camera an orthographic camera is composed of six values the first four are the left right top and bottom edges or limits of what can a camera picture out of the scene and the last two are the near and far clipping planes which i've already talked about here is an example to better understand the difference between a perspective and an orthographic camera notice in the case of the perspective camera the size of the ball changes depending on how far the ball is from the camera the closer the ball is to the camera the bigger it looks and vice versa on the other hand the ball maintains the same size no matter how close or far it gets when it comes to an orthographic camera because depth doesn't matter in this case now back to the code let's create our scene and then the camera by instantiating the perspective camera class which constructor takes four arguments each representing one of the properties that we've talked about earlier field of view it depends on what you're working on but as far as i've seen usually you'll be fine with a value between 40 and 80. aspect its value is going to be the width of the window divided by its height since our canvas here takes the size of the window near and far clipping planes will set them to 0.1 and 1000 respectively that done we need to link the scene with the camera using the render method from the renderer and set the scene in the camera instances as arguments as you can see the scene is empty because we haven't added anything yet so let's add an axis helper and as its name suggests the helper is just a tool that serves as a guide it merely introduces the 3d coordinate system i have talked about earlier into the scene five here represents the length of the axis and now that we've prepared the axis helper we need to add it to the scene using the add method so we still can't see anything and that's because the camera is set to the point with the coordinates 0 0 0 by default and it looks at that same point therefore to see the helper we need to move the camera so let's do that i'll pull the camera back by setting the value of its z position to 5 and there we go we got the helper displayed in our scene again we can change the length of the axis by changing the value of this argument notice that our coordinate system has only two axes well it should have three and that's because of the camera position so to be able to see the z axis which is the missing one we need to change the camera's x or y value and as we move the camera upside now we can see all the three axis by the way we can change the position of the camera or any element in the scene with one single line by calling the set method the first argument refers to the x-axis the second one refers to the y-axis and the third refers to the z-axis now let's add a box to the scene and i won't explain the steps right now as there is an entire section dedicated to that subject we got our box now we can carry out geometric transformations to it an example of a geometric transformation is rotation so here we'll perform a five radians rotation on the x and y axis as you may know an animation is actually a sequence of transformations that occur over time therefore to animate this box we need to apply the rotation in an automatic matter over time so what we are going to do is to create a function let's call it animate then we'll put the rotation code and update it in a way that the value of the rotation gets increased 60 times per second so every second we are going to rotate the cube by 0.01 radians on the x and y axis that done we need to pass animate as an argument to the setanimation loop method bear in mind that we can control the speed of the animation using the time argument to set the value of the rotation we can add mobility to the camera in order to see elements of the scene from different angles using the mouse buttons to do that we need to import the orbit control module then we need to create an instance of the orbit control class and pass the camera and the renderer dom element as arguments then we need to make sure to call the update method every time we change the position of the camera this is very important and there we go now we are able to rotate the camera around by holding the left mouse button and we can move it forward and backward using the mouse wheel and also move it up and down left and right by holding the right mouse button the creation of an element in 3js happens in three phases the first one is the creation of the geometry or the skeleton of the 3d shape we want to add to the scene the second phase is the creation of the material it is basically the skin or the cover of the shape there are a few materials available to use but you need to choose carefully because some of them require more resources than the other materials since they have more features and are built in with more demanding algorithms the third step is to cover the geometry with the material so enough with theory and let's get back to the code editor in this block of code that we type it to create the box the first line represents the first phase we have an instance of the box geometry class which you can tell by the name it's a box skeleton keep in mind that the constructor takes a few arguments like the width height and width and height segments we'll get back to them later on the second line represents the second phase we have an instance of the mesh basic material which is not the less resources demand in one of the materials but it doesn't require light to appear on the scene and as you see we have a configuration object that contains a color property which obviously represents the color of the material the third line represents the third phase which is the fusion of the geometry in the material the result of this combination is a mesh a mesh in the 3d world is an object it could be a cube a circle or a character created using a 3d software the fourth line you should be familiar with by now it adds the mesh to the scene that said 3js has more geometries that we can create not only boxes so let's add some of them but before we do that let's change the field of view in the position of the camera that done let's create a plane for example to do that we need to create an instance of the plane geometry and pass the width and height of the plane as arguments now let's create a material merge it with the geometry into a mesh and then add it to the scene as you can see we got our plane displayed but it looks like a wall instead to see how it should actually look we can add the helper in this case we are going to add a grid helper we can pass a value to the constructor to increase the surface of the grid we can also pass a second argument to the constructor to divide the grid into smaller squares if needed we actually don't need that in this tutorial so i'll get rid of it so to make the plane match the grid we've just created we need to rotate it to do that we can set the following value to the rotation x property and there we go we have our plane in the right place but notice that looking at it from behind makes it disappear to change that we need to add the side property to the material and set its value to 3 double side now let's add another shape and this time we are going to add a sphere to do that we are going to create an instance of the sphere geometry class and pass the radius as an argument the rest is pretty much the same we got our sphere in the scene but if you look closer you can see that it is not perfectly rounded actually to clearly see that we need to display the shape of the sphere in its skeleton form to do that we need to add another property to the material which is wireframe and set its value to true as you see the sphere is constructed from lines points and triangles same as literally anything in 3d furthermore the quality of the mesh depends on the number of the faces created out of these entities that said let's try to reduce the number of the width and height segments the sphere looks way less rounded as a result of the reduction of the segments on the other hand if we try to increase the number of the segments the sphere now looks perfect again these are not the only geometries we can create so make sure to check out the documentation for the other possibilities as i said earlier we used the mesh basic material for the meshes because that will make them appear without having to add the light source to the scene but now let's try to use another material and let's see how the sphere will look like as you see the sphere is covered in black color since we have not yet added a light source to the scene and that's how things work in real life actually you won't be able to see anything if there is no light the same thing goes for some of the other materials like the mesh standard material and the mesh lambert material they need light to show up so again make sure to check the documentation to know the full list of the materials and their characteristics we can't speak about meshes without mentioning how to position them and we do that the same way we did with the camera so we either set a value to x y and z each on its own or change them all at the same time using the set method debugging in playing with values to get the perfect position of an element or its color for instance could take a lot of time and a very common solution to that is to utilize a small sized interface only for that purpose we can create such a solution manually but there are people who have already thought about the subject and they made an open source interface that is very popular among developers who work with 3js the module's name is dad.gui and to install it we need to stop parcel first by hitting ctrl c and then type the following command npm install gui and restart puzzle again when the installation is done now we need to import everything from the module then create an instance of the gui class now say we want to change the color of the sphere by having a color palette on top of our canvas to do that we need to create an object that will hold the interface elements the color of the sphere in this case then to add the color palette we need to call the add color method with the options object set as first argument and the key of the element as a second argument and make sure it is set as a string the next thing we need to do is call the unchanged method and set a callback function in which we specify what has to be done every time we change the color on the interface in this example we want to change the color of the sphere color.set here is the method to change the sphere color and the variable e contains the colors code gotten from the color palette now let's test this out and there we go the gui has different type of elements so we can add the checkbox for example to show the mesh in its wireframe mode when it's checked to do that let's add the property to the options object this time we need to call add instead of add color and pass the options object in the property key as arguments then call the unchange method to change the value of the wireframe property that belongs to the material of the sphere e here is set to true if the checkbox is checked and false if not let's add another example this time say we want to make the sphere bounce and we want to have a slider to control the bouncing speed let's start by creating a couple of variables one of them represents the speed of the animation then within the animate function we need to have the following logic which is needed to make the ball bounce we have the animation working as intended now we need to add the animation speed controller to do that we'll get rid of this variable and recreate it as a property in the options object then we need to call the add method like we did earlier but now we are going to add a couple of additional arguments the first one represents the minimum value aka the minimum speed and the second one represents the maximum value actually we won't need to use onchange here what we are going to do instead is to take the value directly from the options object like this there are different types of light that we can use to illuminate our scene or parts of it including the objects or meshes that belong to those parts which end up with them casting shadows over some of the other objects in this tutorial we are going to discover three types of light the first one is the ambient light ambient light is the light that comes from the environment it is the undirect result of other sources of light an example of that is the daylight in your room the second type is directional light the best example of a directional light is the sunlight it has a source that is so big and so far which in result covers all the space with parallel rays of light the third type is spotlight this source emits the light in a form of a cone the farther the light source is from the surface that receives the light the bigger becomes the cone radius so to add an ambient light we just simply need to create an instance of the ambient light class past the color of the light as an argument and then add it to the scene looking at the result though nothing has changed and that's because of the meshes materials if you remember we created these elements using the mesh basic material which is not affected by light that said we need to use another material i'm not sure but i think every other material is affected by light however they have different algorithms which make some of them reliant on more resources than the others in order to make them cast smoother shadows and more realistic reflections having said that let's change the material of the plane in the sphere to the mesh standard material and see what will happen as you can see the sphere and the plain colors look darker because we used a dark color for the ambient light on the other hand the cube remains as it is because we didn't change its material now to add the directional light we need to create an instance of the directional light class and pass the color and the intensity of the light as arguments to the constructor the scene now looks brighter and notice how the light affects the sphere with shading working with lights can be a bit tricky thankfully 3gs provides helpers to help you achieve the best result with whatever type of light you have in your scene that said to add a directional light helper we need to create an instance of the directional light helper class and pass the directional light we've created as an argument to the helpers constructor method and there right on the top of the cube is the location of the helper it's a square that indicates the direction of the light now same as any other elements in the scene we can change the position of the light source in order to change its direction and therefore change the direction of the shadows which i'll get into in a second we can change the size of the helper square by setting a second argument to the constructor and there we go we got a bigger square for the helper in addition you can see how changing the light source position has affected the sphere now that we are done with adding light it's time to add shadows shadows and 3gs are not enabled by default so to enable them we need to set the value of the shadow map enabled property of the renderer to true then we need to manually set if an object receives or casts shadows the plane here receives the shadows emitted by the sphere being in front of the light source the sphere on the other hand casts a shadow by being in front of the light source the directional light casts shadows after all it is the main fracture of the shadow's creation as you see we got the shadow but it doesn't look natural as it has a missing part and that's because of the shadow camera actually shadows in 3gs use cameras internally which are the same as those we've talked about earlier the role of a shadow's camera is to delimit where to render the shadows that said each type of light has a specific type of camera for its shadows directional light for instance uses an autographic camera furthermore to visualize the space that the shadows camera marks for the shadows to be rendered on we can use another helper this one is an instance of the camera helper class and it takes the camera of the shadow that belongs to our directional light as an argument as you can see now we have four orange segments that go from the camera through the plane the square formed by these segments is the only surface on which the cast shadow can be rendered so to increase the size of that surface we need to move these segments away from each other in this case we need to push only the two bottom segments and to do that we need to update the position of the bottom side of the shadow's camera back to the code we need to type the following line and now that we shifted the bottom side of the camera we created enough space for the sphere's shadow to appear that's it for the directional light now let's move on to the third type of light which is the spotlight to create a spotlight we need to make an instance of the spotlight class and set the color of the light and there we have our light right at the center of the plane again working with lights especially spotlight can be a bit confusing and that's why 3gs provides a helper for this one too so first let's reposition the source of our light then create a spotlight helper this white segment represents the direction of the light and if you scroll back you'll see four other segments which represent the boundaries of the spot created by the light i forgot to add shadow so let's add it before i explain one property of this light the shadow appears but as you can see it looks pixelated and not realistic at all and that's because of the light's angle the angle of the light source is the factor on which depends the positioning of the four segments that define the spot created by the light having said that after testing i came to conclusion that if the angle is too wide the shadow gets pixelated i'm not exactly sure though if this is common or it's a performance issue caused by my 11 years old computer so i'd love to hear from you when you test it so to solve this problem all we need to do is to narrow the light's angle that done now we have a better and smaller shadow not to mention the appearance of the spot border drawn by the spotlight helper this type of light has a set of properties that we can play with to create different effects and we'll use the gui to better visualize the changes that we are going to do to our spotlight something important you have to bear in mind is that we have to update the helper by calling the update method every time we change the values of the light's properties angle we've just seen the role of this property penumbra basically this property adds a progressive blur effect to the edge of the spot and then we have the intensity of the light we can add fog in 3gs with two different methods the first one is by creating an instance of the fog class which constructor method takes three arguments the first argument is the color and the two others are the near and far limits of the space where the fog should be visible so the further we get from zero going backward the denser the fog gets and the same thing goes when we get further from 200 and forward the second method of creating fog is by instantiating the fog xp2 class which constructor takes two arguments the first one is the color and the second is density with this method the density of the fog grows exponentially with the distance from the camera up until now we've had a black background and we can change that by calling set clear color from the renderer now what if we want to have an image as background instead to do that i have prepared a couple of images in this folder that i cut from here and paste it in the src folder i'm not sure if you remember but i'll repeat it again to better organize our project files we need to put everything we may need in the src folder and then parcel will bundle any used asset from there and put it in the desk folder if it gets used in the project's code having said that since i want parcel to include the two images in the dist folder we need to use the import directive like so now notice that once i hit save a couple of image files are created but with strange and unpredictable names so how will be able to use these images in our code now do we need to copy and paste the names from the files manually you might be asking well the answer is no because the path and the name of each one of the images is now stored in the stars and nebula constants so we should use these two constants whenever we need to back to our main topic to use an asset in 3js we need to load it first each type of asset aka file has a matching loader in our case we need to use the texture loader to load an image and then set it as a background to the scene so let's do that the first thing we need to do is to create an instance of the texture loader class then we need to call the load method on that instance and set the path and the name of the image as an argument and that will create a texture object out of the image that we are going to set as a background to the scene the background has been changed but it looks 2d and that has to be expected from a 2d image but that actually can be changed because the scene is just a cube in reality therefore it has six faces and each can have its own background so the overall background appears like a 3d vault to do that we need to use another type of loader which is the cube texture loader and the load method here takes an array of image paths that each will serve as a texture to a face of the cube aka the scene and now let's take a look at our scene and as you can see the left and right sides are textured with the nebula image while the rest of the faces are textured with the stars image let's create another cube and see how to set a background to its faces so to add a texture to a cube or any other geometry we need to load it using a loader of course we'll use the loader we created earlier here then we need to set it as a value to the map property within the material coupled with the cube the texture is green because we have the color property set to the green color so let's get rid of that so that's how we can set an image as a texture to a cube or a sphere or any other geometry because the nature of the geometry doesn't matter since we are working with the material not the geometry itself in addition to that we can change the texture later by updating the map property of the mesh's material now all of the faces of the box are the same but what if you want to have a different texture for each one of these faces to do that we need to create a material for every face and each should have its own texture so first let's create an array containing six materials then we need to pass this array as a second argument to the constructor of the mesh instead of the box2 material variable in some cases you may want the user to be able to select elements from the scene and that's easily doable in 3gs there is what we call arraycaster arraycaster as its name suggests it emits an invisible ray that has a source and a destination that said every element in the scene that the ray goes through gets registered in our case we need to set the camera as the source and the mouse as the second end of the ray so before we get into the code there is something we need to understand first generally speaking in webgl the values of the axes start from negative 1 and end at 1 and these are called normalized values they are relative to the real values here are some examples of normalized values the top right corner coordinates in my case are 19 20 and 0 the normalized values are 1 on the x-axis and 1 on the y-axis the coordinates of the point at the middle of the left side of the x-axis are 480 and 0 the normalized values of these coordinates are negative 0 5 and 0. now back to the code editor the first step we are going to do is to create a 2d vector in which we are going to put the x and y values of the cursor position the second step is to add an event listener to catch the position of the cursor then we will update the vector we've just created with the normalized values of the cursor's coordinates e client x is the value of the x position of the cursor in window inner width is the width of the window thus the width of the canvas e client y is the value of the y position of the cursor and window inner height is the height of the window thus the height of the canvas the next step we need to do is create an instance of the raycaster class then within the animate function we need to set the two ends of the ray which are the camera and the normalized mouse position by calling the set from camera method from the raycaster next we are going to create a variable that will hold an object that is returned by the intersect object's method this object will contain any element from the scene that intersects with the ray so now if we try to display the values of this object in the console you see that its values get changed when we move the mouse around the scene because it keeps touching different elements including the helpers if we open one of these objects here for example we have these three elements the first one is a mesh it could be the plane the sphere or maybe the box the second one is a point or maybe an entire axis of the grid helper i'm not sure and same thing for the third object so you might be wondering how are we going to be able to select the right object especially if the scene contains a lot of meshes well we have a lot of options and some of them are the uuid the name of the element or the id 3js gives an id automatically to each element we add to the scene and it sets it as a property which key is id so first we need to get it and then do a loop over the intersects object if an element has the id we are looking for we can change the color of that element for example now let's use a name so we need to set a name to an element first then add a condition within that loop based on the names of the elements in here we will rotate the box if it gets hovered we have the ability to change the shape of a mesh and that's by updating the position of the points that make up the geometry of that mesh to better understand that let's create a 10 by 10 plane as you can see without mentioning the width and height segments this plane is composed of four points only that said same as what we've seen with the sphere we can add segments to the geometry in order to have more points to compose the plane therefore we'll be able to apply detailed transformations to it a good example of that is applying a displacement effect to an end if you want to create a game or maybe create animated waves etc by increasing the number of segments now the plane is composed of hundreds of points and faces be careful though because more segments mean more resource consumption now in order to change the position of these points we can use javascript code or use the vertex shader if you don't know what is a vertex shader you should definitely watch my previous video in this tutorial we are not going to use that method i'm actually leaving that for another tutorial dedicated to shaders and glsl so what we are going to do instead is to use a few simple lines of javascript the positions of all the points that form the geometry of a mesh are located in an array in the geometry attribute position property each set of three values starting from the first element of the array represents the x y and z values of a point so here for example if you want to change the position of the first vertex of the plane we need to change the first three values of this array now every time i refresh the page three random values are set as coordinates to that vertex to change the z position of the last vertex we need to change the value of the last element of the array i've talked about animated waves earlier and when we say animation it means changing the coordinates of vertices aka points over time that being said to update the coordinates of the first vertex and the z value of the last vertex as you may have guessed we need to copy this logic and paste it within the animate function and do a few changes you have to make sure to add this line it is crucial for the animation to work so bear this in mind when you try to create your own animation i actually wasn't sure if i needed to add this section to this tutorial but i ended up doing so because this is not supposed to be something you're required to learn as a beginner however you'll need it later on especially that i'm going to make a tutorial on shaders and i refer to this section on it anyways in this part we are going to learn two methods to add vertex and fragment shaders in 3gs again watching my previous video is a must if you have no idea what they are having said that let's create a geometry and then a material and this time our material is going to be an instance of the shader material class the constructor here takes an object as an argument that has two properties vertex shader and fragment shader the values are two variables that we create in just a second the first variable v shader or whatever you want to name it is a string that contains the vertex shader code i won't explain this shader code here because i will do a tutorial dedicated to this subject the second variable is also a string that contains the fragment shader code and that's it the second method which is very commonly used is to create a couple of script tags for the vertex and fragment shaders each one of these tags should have a type and usually you'll see developers setting these values to the attributes x shader slash x vertex to the vertex shader script tag and x shader slash x fragment to the fragment shadow script tag these values are not recognized by parcel though so if i save here notice that i get an error message in the command line to fix that we need to change the types to something without special characters vertex and fragments for example now the last step we need to do is to set the content of these two script tags as values to the vertex shader and fragment shader properties within the material instead of the variables so if we take a look at our scene now we should have everything in order we can import models that we create using a 3d modeling program such as blender to do that we need to make sure we export the model in the right format gltf in this case but we can also export as fbx or obj then we need to tell parcel we are going to use this file so it creates a copy in the disk folder it's pretty much the same thing that we did earlier with the images but with different syntax as this type of files require different way to bundle that being said we need to create a variable that holds an instance of the url class the constructor method here takes two arguments the path to the file in the src folder of course and this portion of code that i actually don't know what it does but it is required to import our model file once saved you see that a new glb file has been created in the dist folder that done now we need to import a special 3gs loader to load this type of files the next thing we need to do is to create an instance of the gltf loader and call the load method on it load takes two arguments the first one is the path to the file and the second is a callback function our model is now stored as a property within the gltf object which key is seen so what we are going to do is to simply take it out from that object and add it to the scene and position it the same way we did with every one of our meshes the second argument of load is another function which tells about the progress of the loading process we don't need it here so we can set and defined instead and the third argument is also a function that we can use to tell if an error occurs and there we have it right now the canvas in its current state is not responsive as you see resizing the window doesn't affect its size in any way another problem is that when i refresh the page the canvas stays in that initial size so if i close the inspector mode you see that the canvas is still taking only two thirds of the window and resizing doesn't do anything to fix that we need to add an event listener to catch any resize attempt on the window then within the callback function we need to update the aspect property of the camera and make sure to call this method update projection matrix every time you update any property of the camera we are calling it here because we are updating the value of the aspect every time we resize the window finally we need to reset the size of the canvas this method should be familiar to you because we have already used it at the beginning of the tutorial and this is it for this tutorial i hope i succeeded at helping you setting the first building block of knowledge of this amazing library i know some of the concepts are quite a bit hard to understand for someone starting from zero however with time practice and patience i'm pretty sure you'll be able to get a solid grasp of them with that said make sure to like and subscribe and i will see you in the next video

Channel: Wael Yasmina

Views: 171,063

Keywords: three.js, threejs, three.js tutorial, webgl tutorial, three.js tutorial for beginners, html5 webgl, html 3d, javascript webgl, js webgl

Id: xJAfLdUgdc4

Length: 53min 26sec (3206 seconds)

Published: Wed Nov 03 2021