THREE.js - 3D Content for the web

foreign today we're going to talk about 3as a powerful JavaScript library for managing 3D graphics on the web it's really cool for graphic representations AR VR experiences and even games and it's also being used by big companies like Apple so let's get started let's understand how it works and see the results okay first things first I need to create my index HTML in my app in this case because this is a manila application and I want to use Imports the same way I will use them on node.js typescript or anything else angular whatever I use an import map here I can provide the name of the import that I need and where the package comes from and I can use that model directly in the same way just import from XY package it's really cool and it's a modern way to use models on JavaScript but you should be able to use a a CDN of any kind if you want to use 3s it's the same thing in this case I think it's better to use models it's a more organized way to work first thing let's do some changes into the body and by using CSS I'm going to create a CSS folder called Styles and in the stats I'm going to create styles.css here are the final rule for the valley body position uh I'm going to say it fixed it should be the same thing as absolutely in this case I'm not going to scroll so whatever lf0 with 100 hate 100 and let's set a margin out of it's needed if I totally don't need it let me see now if I go here oh I haven't imported my CSS let me go here links this system style styles there I have my CSS now and if I look here it's taking also all my space but it has some margin there and I want to remove that so let's put margin zero and that should be enough now we have the space for our canvas where we're going to render our 3D or 3D area you should you could use any space that you want but in this case for this example an application application I'm going to use the whole window the whole document so cool now that I have my body set up for this let's start with a with a 3as implementation so let's create a scripts folder Scripts and add a main dot MJS why aim the MDS because it's a model that's the the extension for models so how do we import a model it's the same way as as important a normal script a script Source we set the source but we need to add type model now it will it will import this model and we can we can use inside stuff like import as three from three and now we should be able to use the the three model directly and as you can see I'm using the package name so this code if even if I was using npm or anything should work the same way which will make my library or my model reusable in any in any type of application so now let's define a class I'm going to call it app well no let's call it main because they file it's called main so yeah export default class Main now it's at my Constructor and let's see that let's make our Constructor receive an element that will be the container of our application this element is equal to element so now that we have that we can create a method called setup Graphics where we will set up everything the renderer for 3as are seen the camera all that stuff let's create setup graphics yeah you see I I I I first called the method before creating it not recommendable but yeah it works same thing who cares who cares this render it's equal a new 3as 3 webgl renderer I don't like to use the whole thing yeah I don't don't I don't need you like I can do it I'm not going to use anti-alias only and the Alias will make everything looks more but I'm going to add also Alpha so I can like use the the CSS background the background of the of my body of the body of HTML as a background for my application so yeah I have my render and let's define some stuff like set size the size of a window let's define the pixel radio render set pixel ratio and window device pixel radio this is for to make our 3D application look better on many of the devices by use adapting the render to the DPI of the device we need to make our also a function that takes the event of the resize if we want our application to be responsive and also to manage stuff like the rotation of the phone because it will trigger a resize event we will do that later but right now I just need to set this for the beginning of the price so the clear color I said it's black alpha zero so it this means that the background of my of my render will be fully transparent this is allowed by the trans but by the alpha flag here without this we will have a black background in this case I will keep using the body background yeah I can manage with my styles so okay I think that's it for the renderer and maybe let's uh think now that we have a renderer created we can start by adding up let me add some little little things uh extra things little extra things I'm going to set the this render this renderer Dom element Style display as a block I think it's not needed actually it will take the whole size because I'm saying that's the size yeah let's remove that I think that we don't need that and but let's set the shadow map so we can have shadows on our product because 3D without Shadows doesn't look really great so render shallow map enabled and we set it to true that's cool that's enough for that now we need to add the render element to our ah read my mind and to our element and so it will add the renderer there will this is a canvas and HTML canvas in 3D that will be added to our page and there everything that we render with our webgl renderer of of three will be a represented there everything so now that we have our renderer on our element let's create a new scene and let's create a camera so and this camera is just a perspective camera and it has all the parameters for the perspective of the of the of the page the near the far the field of view I'm going to have a field of view of only 45 degrees and the aspect ratio we can we can calculate the aspect radio of the camera by dividing the the height of the window by the head of the window so we can we will see more about this later but let's first create our the first stuff needed to have our project now that we have that we need to call a an update method that will keep the renderer updating every frame a using something called request animation frame and this will allow that it will run the web the the GL render based on the refresh rate of the of the web of the web browser or the PC taking full advantage of this so okay now that I have this let's define our update this update once we are done setting up the graphics let's update so now I just do this and it will take my render and render this the scene that I have on my application and the camera and then it will request an animation frame calling the update again this should be enough I think and but we will not see anything because we don't have any objects let's um have a little method called a mock-up markup oh no I'm markup method and let's set up this a mock-up and let's add a little mesh to our cnd's scene I'm going to add a little cube a black Cube it's going to be black yes add and to add elements to our scene we just need to inst create an instance of the object that we want to create in this case I'm going to create a mesh and as you can see I'm creating a box geometry this is the structure the the the the the geometry the shape of our our element the mesh that were that we're adding three uh we have some basic shapes we have sphere geometry cylinder geometry I love of multiple geometries that we can use and we can just provide the parameters for every everything single one of those for the Box geometry you provide the x y and C values of the sizes like the width the height the depth of the of a box and it will create that then we have the materials what are the materials the definition of of the style of the block if it's going to be reflective if it doesn't if it's going to have shadows all that stuff is defined of on them on the material they're the shininess the transparency all that stuff in this case I'm going to use a basic material because it's just an example and because my my background is white I think it's not very useful that it's white so I'm going to make it black this is the hexximal code for Black and that should be enough to add something but we need to move the camera because right now the camera is in the same position as the as the mesh because every element that we have um every element that we have it's just a on the position zero zero zero X zero y zero c0 so the the camera will be inside the block and it will not show anything so I'm going to change this camera um position C equals 5. so this means that we will be 5 in the depth of the camera so we should be able to see the block anyways so let's save the application equal new main document body it will render everything on the document body because this is the parameter documented as you can see it right there even though my because my visual is transparent here I have my little Cube but that doesn't seem Super 3D right so let's set some stuff but as you can see I have already set up my my little environment for a rendering 3D but we need to make this a little bit more 3D first thing first as you can see if I resize my page it doesn't resize I want to change that first let's do it really quick by just catching up the resize method so on resize and we change the camera aspect we change the size the the size of a renderer and we need to update the Matrix of the camera but when this needs to happen we have Windows Windows element listener that's it and now every time we resize the window we shoot our render should be should adapt to it as you can see it's happening perfectly and now let's do some stuff now we have already ours our setup our thing let's do some little changes so we can like test that test this out I would like me Pablo Ferreira for this example to create a little chair I want to create a chair a cute chair that I can rotate this is where just for the sake of showing how we can create that let's just do that by using a little some boxes and stuff but as you can see in a little less code we have already set up our 3D environment and actually if I do this this is not the right way to well let's do it now okay I'm going to do it here so I'm going to take this mesh out of here let's have it here as QB Cube Cube and I'm going to add my Cube here and set a interval function and 1000 divided by 60 so 60 frames per second let me send the cube here I think it's not necessary because it's Global there but I'm going to send it here at the same way and yeah let's use the the example from copilot here so right now as you can see my 3D cube it's rotating there it doesn't look very 3D right because it doesn't have lights I think we need to add a light to it it would be better if we have light and we said receive shadows and some stuff but first let's change the material for mesh bong material you will not see the difference first but let's add a light let's set a light let's set a bar light will be a new directional light I think that works and let's move the directional light to to like at the top of it then my Q I want my Cube to receive shadows and and and display Shadows like gas shells to other elements so I so I can like take a cast shadow through receive shallow through I still cannot see my light I have enough my light I need to add my light also to the to the to the scene so there's that light and maybe now I can see something different yes yes as you can see my light is on the front of the cube so it displays the light like it's there yeah maybe we should make our Cube more shiny it's too black for me and let's change the shape of the shape of the cube because let's make it narrow so X Y and Z let's put this 0.5 and this one also 0.5 yeah I don't want that Dimension this this one 0.5 so now our and that that's our cube in a better way so let's put the light a little bit to the top and now it's it's it's a the light's coming from the top and we have our 3D weird uh Cube and let's make it not black color hacks help me out let's use this color because why not set this color here and now we have our little Cube there that has Reflections cool now that we have our Cube and all this stuff now let's read the code a little bit understand so I create my light I create my light I set the color of the light and the and the the opacity of the light or the power of the light I think intensity the intensity of the light it's the same thing and we set the position where the lights from of course because it's a light it doesn't have a body so we can like not see it on the map so we have to imagine where where this will be I think the lights something like here but more like to me so yeah that will be the light let's position like right there and then I create my Cube that in this case has a box geometry of 0.5 1 0.5 um and I just add my my my material in this case I have a green material here that also for memory you should be able you should reuse materials so okay I want to create a little class called share so I'm going to create a little folder here called objects and let's create a chair MJS so I'm going to import 3as in the same way I'm imported on the main and Export default class chair oh yes chair chair yeah think chair it's okay yeah probably and extends three group a group it's something that can contain many of three or three matches so in this case because I'm going to create a little chair I want to have my chair to have the back of the chair some legs and all of those are different meshes so I'm going to Care create to create a group so Constructor super so it will call the Constructor of his parent and now a render this render so I'm going to render this and let's now import our chair here import share from object share and remove this I'm going to leave the light because I need I think the light is useful but um let's just add here our new chair chair and this is a scene add a chair now let's work on our chair our little chair so let's think let's imagine how we want our chair let's be creative in this way and let's create our legs first and let's create four legs so and the first leg and I I don't know how we can call the Lex let's see uh wow four four legs well maybe a chair is too hard no no let's do the chair so top left leg will be a new mesh three a new geometry so uh 0.5 as we saw it was too uh too fat so I don't want fat legs I want little and beautiful legs and the color will be let's let's find the brown color here a brown color this is not brown well this is brown not be really Brown I'm going to Brown more oranges like this one and then we go here and yeah this one works this one works Let's uh let's say about a chair color here then we can say that's a parameter in the Constructor yeah who cares so a chair color and now we have a top left uh chair a leg why this is a failing so I'm closing here this and here okay yeah I need this thing so now I have my top left leg and yeah you know I can I can make a loop for this foreign let's push all our legs there and let's push our little mesh there and let's take uh this app next leg index so you should add our legs yes it seems like we have four legs but every it's one on top of each other so it will not be displayed as we expect to so but let's first do all the parts of our little chair so I will have my I needed the base like the the top part of the chair so I'm going to create a little square for it uh well back well let's create the back no the back first no let's create the the this seat of the chair so new mesh boxiometry and I think that works let's use this at seat so now I have we have a receipt let's set the camera a little bit to the top so we can see in a better way this and well maybe that's too much I have a little a little uh example of of a camera I like and that that will work perfectly for me so I want to like have some asymmetric way to see the camera and I think the debate the way to get that it's like have negative five here no five five three and this camera position X should be in negative five negative five and let's say that the camera is going to look at chair position so now I can see better my chair structure my fake chair structure so cool now that I have that let's create a little back for my chair it set the position right actually so cool now I have the back of my chair I have the the seat of my chair but everything doesn't look really okay so cool the the back it's actually well put it by by um by copilot but yes no 0.4 because it's 0.1 likes 0.45 yeah now that looks like the back of my chair my little beautiful stupid chair so now let's set every leg into the right position so the first one like if we think of this this is this it's position everything is positioned on the on the position zero so if we if our chair size like at the seat it's one by one by moving 0.5 and this and the half of this I should be able to get into the right position but let's try it out so I don't want to move it in the well in the Y on the y-axis x y c on the y-axis I think I need to move it 0.5 now negative 0.5 also that that's for all of them so like negative 0.55 for all the the legs that's okay and now let's set the position for the first one a so let's keep the leg zero position y let's skip that one exactly the same and just change this to so and negative 0.5 45 yeah that's perfect and then here negative 0.5 well that doesn't seem really well placed it's it's well placed like it doesn't symbol placed let me put 0.5 okay wine it's 0.5 here and if I put 0.5 here it's out maybe with it doesn't look like it but it's well it's 0.5 because it looks better like it looks like it's okay so okay now I have that let's add foreign positive 0.5 zero point that that put it it's the one not there now for the other one should be the same but this in positive and then 0.5 and then 45 here no they think it's 45 in both places yeah yeah I think we cannot put this but it doesn't look right like when I put the 45 that should be enough doesn't look right there's something weird ah you know why because of course let me put 45 here it did the the part that it's out it's the back of the chair look now it's perfect and let's put this on the two and the the last one should be both uh both negative no okay negative negative positive negative positive positive then we need negative here positive here and that will be the third the third and yes now I have a little 3D chair and let's make it rotate because it's everything rotating looks per looks better so a little setting turbo here but I'm going to make it rotate here like uh these animate and animate we can use a request animation frame but because I want to use something just for for the example in terrible function three thousand and 1060 frames per second and let's send this yes chair here and chair rotation and there you have it I have my beautiful chair there that has the back wrong and we can like fix that Hmm this one it's wrong there there is one one that I live with if oh sorry five and now as you can see I have my little chair there and I can make it with any color let's put let's put any color let's put on our color put um which color let's go back to the beginning and just take another color and put our chair in our color like this one this was really funny like he screamed it and see now I have a little purple chair it doesn't it doesn't require a lot of code and it doesn't require a lot of time to get stuff and you just need to be creative also you don't need to create your own models you can create you can use any mods that you can find or even do them on blender and all that stuff because you should be able to import a a lot of formats of 3D models to your application you can interact with them animate them and work with them in in the best way possible and this was I think less than what then 300 lines of code and we have a little rotating 3D chair with Sheldon and everything and a little light I mean it's incredible something that it's barely believable that we can that we can do that quick now um one one thing is that uh just we should be able to to like take every single children from here let's use a loop through our children's four bar children in this children off these children yeah just to to make them old cast Shadows and let's put out the the light again in the in the position that it was uh yeah I think that looks great it's a it's a little cute chair and it wasn't hard to create well I think that's it it was just to cover the basic stuff of how 3as Works how to create a render how to create our own scene our camera and some elements that we can add to our animations to our renderer or our graphic representation it's really cool injection you should be able to use a to do anything with it um I can even add events and stuff related to the to the keyword to interact with with my models or display anything I wanted to it's a really fantastic Library there should be that you should try for yourself you see with just 300 lines of code I think we'd cover most of the basic stuff of how to manage a 3as project we created a render camera is seen a a 3D object like a chair without any previous 3D knowledge or knowing how to model stuff created something with shadows and likes and everything so just try it out check out the 3s documentation and their examples and I'm sure that you might learn something new and great with your creativity will lead to incredible results so if you like this video don't forget to press the like button and subscribe so you can see the content that we're uploading every week if you like to see something new or do you have any topics that you would like to learn about comment it we can check it out we can review it in maybe the next video comes from your comment so without anything else to say try 3as it's great I I really love that we could do a purple rotating chair together and have an excellent day bye bye

Channel: Hahn Software

Views: 287

Keywords: #C, TypeScript, Angular, .NET, dot net, JavaScript, threejs

Id: b9U6QsuRUyI

Length: 33min 45sec (2025 seconds)

Published: Fri Sep 02 2022