Hello, in this freedom JS video, we are going to look at how to draw geometry. There are various geometry they can draw, you can draw, yeah, you can draw spheres, you can draw boxes, you can add color text all our stuff. For now, I'm just going to keep it simple and draw a cube. So, before we actually show you how to draw, right, what we want to do is go to the free j s.org website. I'm going to show you if you go to documentation, you can see all the different types of drawing methods that you can use because though we're going to be drawing a cube which is the box geometry, you can easily draw a circle cylinder dodecahedron you can do various types of geometry. So this is a great way of looking Okay, I want to do a sphere, john trade, maybe you wanted you create a football, you would click on that.

It gives you you an example of it. And then he also gives some example code and he explains the blocks that we're going to be dealing with box geometry. But the principle is exactly the same on the website, check it out, read about it, and just take a look at this code. So let's go back to our text data. So first of all, we are going to create a variable quadric geometry. create the shape.

Formatting doesn't look right. So let's sort this out. Okie dokie. So let me just sort this out because obviously I don't like you like this at all. No, why there's a empty semi colon. They're not good at all.

This give me a moment. Almost obviously this is just personal preference how you format your code or just like you like. I'm sure everyone has their own coding standards that they adhere to. Almost done just a couple more brackets to go. Okay, like we were saying we were creating the shape. To do that do ball geometry equals new free dot box.

G m tree says get rid of that messy let's turn mail off so it doesn't disturb us. So freed up box geometry 1112 This is a soil One the x axis one y axis, one Zed axis, okay which one it depth for one and the height of one. Now, we are going to create a material, kala image texture, whatever you want, we're just going to create a basic mesh material and just assign a color value to it. In a tutorial in in the laboratory, we will cover how to actually assign image textures to make it look a lot more realistic. So VA material equals new three dot mesh basic to real I didn't hear do I'm gonna bracket And then you specify the properties of your basic material. So we're going to put color, we're going to put a hexadecimal value.

And to do that you do zero x and now your hex value for FF, FF, FF, and that is white because all the colors are all the way on. I'm gonna set wireframe to false. We can easily change it to true as well. I'm gonna do var cube, which equals new. Okay, go down to the diva cube equals new free dot mesh. And this just takes two simple simple parameters, the geometry, so geometry and the material Cheerio.

Finally, we can do scene dog cube, save that. And now we go back to our browser refresh my thinking can't see anything. And the simple reason for that is the cube is rendered at the origin. The camera is rendered at the origin. So where the cameras inside the cube so what we want to do is just change the position of the camera slightly. We're gonna do camera dot set, I mean dot position, dot Zed equals free.

So this is just moving it closer to us. Refresh. Okay, stop payments, so let's inspect to make sure there's no errors. We've got an error free is not defined online 32 Okey dokey is not liking var geometry equals new free dot geometry. 111 Ah, although that should be capital free my word, a copy that paste it there, paste it there for the savings common at this time so you can actually see what it would look like with it working. And you can see we can't see anything cuz we're inside of the cube.

And if we go back and comment, refresh, we have our cube, probably thinking it looks like a square. Yeah, and the reason for that is because we're looking at it front on. So to illustrate that it is a cube. We're going to set wireframe to true. So all we're going to see is the outline, refresh, and there you go. You can now see that we have a cube drawn to go one step further, what we're going to do in the update method, we're going to rotate our cube every frame, we're going to do cube dot rotation, dot x plus equals 0.01 cube dot rotation dot y plus equals 0.05.

Save that. Refresh and as you can see, you can now see that it is a cube. If we were to go back and disable wireframe mode, so set that to false, go back refresh, it's hard to see that is a cube. And the simple reason for that is we've used the basic material, which isn't affected by lighting, you don't need any logic to see it no shadows cast it, so you can't carry true true true understanding that there is depth in our scene and in our objects, but in later videos, we'll have Lloyd chain will have different textures, different materials, so you'll be able to actually see without having to enable boyfriend wife Right, whether it's a 3d object or not, but this is just a great basis for moving forward. So let's just set this to wireframe again. Refresh.

There you go, we have our box geometry. Like I said, if you want to draw something else, feel free to go to something like cylinder shows you an example, shows you some simple code. And it's really simple. Instead of having box geometry, your cylinder geometry, you still have mesh basic color, that just just adds a color instead of adding other values such as wireframe, and then he just creates a mesh using the same method that we did for peel box geometry, then he adds it to the scene. It really is that simple. Thank you very much.

If you have any questions, feel free to message us. And as usual, thanks for watching, and I hope you have a great day.