 Okay, this is part of a series. There should be an annotation on the screen to the full playlist new video every Friday on HTML5 and 3d stuff mainly using 3js So far we've done a lot of stuff Definitely recommend watching previous videos because we're gonna build off the code. We've already created but as far as shapes we've done Cubes and we've done planes, but 3js also allows for other basic shapes such as spheres cylinders and cones which are basically cylinders And so I'm just going to show you today how easy it is once you know the basics of 3js How straightforward it is to create these other shapes? so let's go ahead and Look at our code. So it took a code from last week copied it into a new file called sphere dot html Obviously, it's still a cube here. Let's go ahead and have a look at this code called sphere So right here we create our cube, but we're gonna create a sphere now again this name right here cube is The name of the object you can call it whatever you want, but we'll call it sphere just to prevent confusion Let's also we add it to the scene. Let's move that Up here Okay, let's add that up here scene dot add Sphere Just so it's by where we create it you can either decide you decide where you want to add it Just me. I like to keep things next to each other. Okay So we're gonna call the object sphere that doesn't make it a sphere That's just what it's called But in here we have that we're creating a new mesh. What type of mesh is it? It's from our 3js we're gonna use cube geometry. No, we're gonna change this to say sphere Okay, so we have our sphere and that's pretty much it other than giving it different parameters in here Now with a cube you want to give it height width and depth. That's what we have here The sphere doesn't work like that a sphere does take three values. I think but let's double-check the documentation 3js is very well documented at their website sphere It can take all six of these but really we're just gonna pass it three a radius Width of the segments and and height segments that the number of width segments and number of height segments I think once again if you hover over these it tells you this one's a float This one's an integer and this one's an integer. So these are whole numbers This one can be a whole number or a decimal tells you the defaults if you were to leave these blanks defaults for a sphere radius is 50 The number of horizontal segments the minimum is three the default is eight I suppose doesn't look like there's really doesn't list a maximum But obviously the higher those are those numbers are the smoother your sphere is going to be the the the width and height segments Higher they are the smooth that they're going to be but also more system resources. It's going to take up Okay, we're not even gonna look at these other options because I actually haven't looked at them myself But let's go in here Let's go ahead and leave this off what we have from before with the cube and we'll change that here in a little bit just to play around with them, but go back to here go back to here and refresh and Something's wrong Let's see Maybe these numbers don't want to be that high or I type something wrong Somewhere Looks good F12 I'm using firefox and hit F12 because I have firebug installed refresh the page Oh Okay, that's the problem right there. See it's nice having these debug consoles both firefox chrome and most browsers have some sort of basic Console in it to for debugging of JavaScript I like firebug. It is great and right there What the problem is the whole code is locking up because up in our animate function here, which is rotating stuff is trying to rotate Cube which no longer exists So we're going to come in here and change this to say sphere Even though you're not going to see that animation because it's rotating and it's a perfect cube with Symmetrical color all the way around But at a later date and we add different textures to it. You'll be able to see it So at five there is our cube our sphere spinning around actually you can see it spinning because of the low resolution We have set at 10 and 10 if we were to one lower the size of that because it was rather large to 100 units And we were up the resolution of the height and width segments Now you can't really tell that it's rotating You can see a little bit of quivering in the pixels here on the edge But so smooth and symmetrical in color. You can't see it rotating even though it is Let's again lower these segments Minimum they said was three. Let's do that. Let's go three and three and There we go. It really doesn't look like a sphere anymore But that's the minimum Let's go ahead and set it to 31 I meant to say 30, but I hit the wrong number, but 31 is fine. So you go it's a little smooth So definitely higher numbers are going to be more of a system resources. This is a pretty smooth sphere right here Obviously not as smooth as having numbers up at 100, but you're looking at a third number of polygons actually Maybe even less it's a third of height and width. I guess that would be a third I don't know. It's definitely a lot less than a hundred of both And you can see it rotating around this way because we are rotating on the y-axis So just remember the three main things you want on this are This is the radius. So this is how big the sphere is going to be And then this is how these two are how smooth by number of there's other ways to smooth stuff out But smooth by the number of polygons these segments height and width okay now that we have that done we've looked at creating a sphere Let's vim into another file. We have called cylinder dot HTML and let's have a look at that again It's the code we started with which was our code from last week, which is a cube. Let's come in here and Change things we'll call this Well, we want to make it a cylinder so instead of calling it a cube we'll call it cylinder Which is kind of I like to abbreviate stuff. So we'll just say Cyl actually we even call it cone because at the end we're going to turn it into a cone of sorts, but So we changed up there. This will be able to definitely see rotate When we're rotating it depending on which way we're rotating it But here we also want to call this the same thing and when we add it to the scene Which is down here? Cyl let's move that up here okay so we're creating an object called Cyl and It is we're calling from our 3js. We're going to create a new mesh New geometry what type of geometry well, we don't want a cube. We want a cylinder So we will just come in here. Remember this case sensitive so capital C here cylinder geometry, okay, so this takes Very different well, I don't say very different, but different these three numbers aren't going to cut it It might throw in some default stuff, but let's go here to the documentation on their website and we're going to go to Cylinder geometry so we have our top radius bottom radius height Segment radius segments height segments and whether it's open-ended or not So let's and of course it has some information in here on the fault values So top and bottom. Let's keep those the same at first so We'll make them both 100 start out height We'll leave that at 100 for right now Okay, so radius segments and height segments Let's go 50 and 50 on those and open-ended that would be if we hover over this it should say balloon a That's how I say it. I'm balloon a yeah, anyway true or false and we will say False at first So now we will click here and refresh there is our cylinder, okay So actually let's change this to Wait, I spelt false wrong didn't I? Well, I'm drawing a blank there Yeah, I'm spelling it right Open-ended false should mean that it's not open-ended, but it is displaying open-ended. Oh Maybe I don't do I not want Sorry about this. I hate when I mess up in trials. There we go. I was writing it as a string It doesn't want as a string. That was the problem. Okay, and I'll explain what was going on there momentarily So here's our cylinder. It's rotating this way So you can't really see it rotating because it's rotating on the smooth surface like a wheel would let's rotate it on the x-axis, so we'll come up here to our animation function and Change it to rotate instead of the y it will rotate on the x and now we get it rotating this way There we go. You can see it a little bit better now now. Let's Play around with this. It's kind of short and pudgy right now. Let's make the height so We got the top and bottom radius. Let's change the height to 200 Save that refresh now. It's a little taller nice. Okay Let's lower these numbers down to 10 and 10 Okay, so you can see it's a little blockier now. There aren't as many segments And so let's turn that up a little bit. Let's find a nice Medium area. We had it at 50 before let's set it to 20 and 20. So there we go It's still kind of blocky once again. You got to have your your your target audience What is this going to be running on this is going to be running on a phone or a full-speed computer They're gonna have hardware acceleration, you know, for me, this is good enough It looks decent and it uses a lot less segments. So a lot less polygons and Let's go here and we will change this. This is top bottom So we're changing the bottom radius so you can change the bottom radius or was that the top radius? It seemed to be the top. No, it was with the bottom So not that you can tell because it's rotating head and over end So really if you want to create a cone you just set either the top or bottom to zero depending on whether you want the top Bottom to come to a point. So there we go. We got it rotating. We got our cylinder. That's kind of like a cone But let's go back and look at this Open-ended let's change this to true. There we go Now we do that and you'll notice. Oh, it's like white at the end the reason for that Okay, we this is basically there's no end cap so you can see inside the cylinder inside the cone inside the cylinder Whatever you want to call it at this point But our materials are only one-sided so basically we're seeing through the inside of the cone Well, excuse me Most 3d Renderers by default will keep will make materials that are only one-sided to save on Rendering you don't have to worry about rendering stuff. That's out of view if the object is enclosed So if an example like this if you wanted the end caps to be open You probably want to make a double-sided material I didn't show you it, but I'm pretty sure the same is true with the plane that we created in the first tutorial If we were to rotate that plane to where you could see the other side It would be invisible on the other side because we can see through it future tutorial. We will get into materials a little more and Make them double-sided, but for now Let's set this back to false so that we have end caps It is an open-ended false open-ended and there we go. We have our cylinder slash cone again all Both these will be uploads my site There'll be a link in the description to all the scripts in this series Or at least most Or you can look at the actual functioning Script in your browser. You can also look at the code download it modify it play with it That's how you learn play with a lot of the value see what happens see what you come up with. That's how you learn So I thank you for watching. Please visit films by Chris calm That's Chris with a K. There should be a link in the description and yes I actually spell my name with a K. K. RIS. So if you do message me Preferably in the IRC channel at our site on free node net I'm in there under metal X 1000 But my name is Chris with a K. K. RIS because people still write it CHR I ask even though my websites films by Chris and I'm assuming they just don't realize that that's actually how I spell my name anyway Part of a series be sure to check out the annotation for the full playlist new video every week if you get to a point in the Playlist where there is a private video that means that video has not been posted yet Don't message me asking me how you gain access to it You gain access to it by waiting another week until it is published A new video every Friday If you like this topic of 3d stuff in your web browser that it that it makes it easy to get 3d stuff from Desktop to other to mobile devices and then be sure to like this video We will get into more advanced stuff further down the line Like first-person shooter style stuff where you can look around hop We'll get into physics a little bit where you can knock stuff over and throw stuff Way down the line obviously, but we're getting there. We'll get into importing models That you've explored from something like blender or full scenes from blender 3js allows all of this and makes it very easy to do For now keep watching the playlist and I hope that you have a great day