Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:9Length:52 minutes
Three js beyond the basics 400x277
  • Overview
  • Transcript

2.3 Exploring Shapes

In this lesson, we will explore a number of different Geometries within the Three.js framework, and we will build them into our scene.

Useful Links

2.3 Exploring Shapes

In this lesson, I wanna take a look at a few other types of shapes that we can create in Three.js. So I'm gonna jump to the Three.js website at threejs.org and then click on the documentation link and we can find a lot of information here on the framework. And if we scroll down over here on the left we have these list of references which are in alphabetical order, and if we go to the gs, we can find a section on geometries and these are all the different types of pre-made shapes that we can create, and the first one might look familiar this is our BoxBufferGeometry and our BoxGeometry. Now you'll notice each one has two different versions, a regular version and a buffer version. The buffer version is basically just a version that runs a little bit smoother. So if you have to create a lot of a certain shape or if you have just a lot of shapes in your scene, then it might be a little more efficient to use the buffer versions of this shapes instead of the regular version and the way you create them is gonna be the same. If we go to BoxGeometry for example, we see that we create that by typing new THREE.BoxGeometry in the narrow Width, height, and depth, as well as some other parameters that we can pass in to our constructor which we can see down here, but again, we just get to that through three.box geometry. And it's the same thing with our box buffer geometry if we click on that one. The only difference is we call it box buffer instead of box geometry and we can pass in the same values as you can see down here. Now this is the section that is really gonna help us out as we're creating our shapes because it tells us, first of all, all of the parameters that we can pass in and what type of value that parameter is so we have the width which is a float its is a number. We have the height The depth, the widthSegments, which is an integer, heightSegments and depthSegments. And down below, we can see more information on each of those parameters or properties, and we can see that the last three are optional. So the only ones we have to have, are the width height and depth, but even those, if we don't enter them in, we'll discover are actually optional as well. So if we jump back into our code, and let's fork our scene here, we're gonna create a new copy you can find the url for our starting pen, and of course notes, and then we're gonna fork it, and all the changes we've made will be saved in our new fourth version. And when we created our box which would be right here using BoxGeometry, we passed in these values, but even if we get rid of those values, we'll see that when our page refreshes that everything still works fine because it's using those default values. If we go back to our documentation, we can see that the default width, height and depth or all one, so when we get rid of those, it still works just fine. So even though it doesn't say optional, they kinda still are optional, but let's move on a little bit. Let's, first of all, I'm gonna start by renaming this to give it a more generic name. Instead of cubeGeometry, I'm just gonna call it geometry. And then we'll change that wherever we're referring to cubeGeometry. Our material already has a generic name, but our cube does not. So let's just change cube to shape. So I'm going to copy that in anywhere I see cube. I'm going to change it to shape and we should see it in our animate function down her as well. And once we fix all of those, we should see it come back, and there it is. So let's create a couple of different types of shapes here. So I'm going to, first of all, comment out our first geometry here, our box geometry. I'm just gonna keep it commented out so that it's still there for your if you want to access it, but it's not longer working. And let's take our, let's go yo our geometry's of the documentation and let's find something else. So we have a circle which is basically just a flat circle. Let's keep over that, that is kind of boring. Let's go to our ConeGeometry and again, we can see a basic cone here. And if we scroll down a little bit further we can see an example of how it's built and then below that we can see all of the information for our constructor. So our first value is the radius, and that's gonna be the radius of the bottom of our cone, and again we can see more information about that down here. We have the height of the cone, the number of radio segments which are going to be the segments on the bottom of the cone here, and by default it's set to 8. But if we increase that number to a much higher number, then it will look more like a circle on the bottom and not an octagon. So let's experiment with that a little bit. I'm just gonna grab this first line of code here where we're creating a new Cod Geometry I'm gonna copy that, jump back into our code and just after our commented out version geometry there, I'm gonna paste this new code. And we should see a cone show up. And, it's a really tall cone here, so let's get rid of some of that. Let's get rid all three of those numbers and let's just see if Default shape. There we go. And that's rotating really fast, so I'm gonna get rid of the z rotation here, just gonna comment that out and maybe reduce the speed of our x and y. And there we go. So let's go back up to where we created our cone geometry and let's pass some values into it for the base, let's increase it. Let's say we want it to be to have a radius of two. We'll see that makes the base a lot bigger. The second value here is the height, so we'll put a comma there and then let's bring the height up to about four. There we go, and our bottom still looks Looks like an octagon, so let's increase our radial segments. Let's bring it up to maybe about 30. And when that refreshes we can see the bottom looks a lot more like a circle. And if you want it to look more like a circle, you can increase that value even more. Just remember that the more points you add to a shape, the more JavaScript is gonna have to keep track of, and the more or the less efficient I should say your scene will run, but for now that looks pretty good. So that's a cone, easy enough. Let's take a look at just a couple of more and then we'll wrap it up. So we have a dodecahedron, that's sound exciting. Let's jump to that one. And again, you can see this one only has a couple of properties here. We have a radius and a detail because there's really only one way to create a dodecahedron. So there's not gonna be a lot of options for it. And all we really need to worry about here is the radius. So you can play around with the detail if you want to, but it basically turns it from a dodecahedron into something that looks more like a circle, if you play around with that value too much. So I'm just gonna deal with the radius. And you'll see this one doesn't actually have a code example, so we'll just have to type it out ourselves. So I'm gonna go ahead and copy dodecahedron geometry, cuz I don't want to type that out myself and let's comment out our geometry here and we'll create a new one. So var geometry = new 3 and then I'll paste dodecahedron geometry. And we'll leave that blank and by default it gives it a radius of one, and that looks pretty cool. We can bring that up to two and make it a lot bigger. And there we go there's a basic dodecahedron. So you get the basic idea. There's a lot of shapes we can play with maybe we'll do one more, where's the taurus. Let's do the taurus geometry which as you can see is a big It looks like an inner tube or a tyre and you can take a look at the values here. We have the radius which is the overall size of our torus, we have the tube value which is going to be the radius of the tube. So if we were to cut this tyre on one side and then flatten it out into one long tube, that tube value would be the radius of that tube. And then the radial segments is the number of segments around it, and we can play around with those values to see what that looks like. So let's grab this line of code here where it's creating that geometry and, as you can see, it's making it pretty large there, so we might need to change those numbers, but we'll just copy that and let's comment out our and then we'll paste our Taurus. And first of all, let's change the radius, let's bring it down to 2, a lot smaller. And since the other values are so large it's making it look weird. So for our two value here, let's bring that down to one. And there we go that one looks like a tube there. We can even bring that value down further if we can bring it under 0.5. We can see our tube get much skinnier there and then this third value again, let's jump back to our code or documentation. Our third value is radial segments. Now the radio segments, if we bring that down to a really low number, like let's say four, you'll see that our tube has a different shape to it. And it's kind of hard to see on this red shape, but if you look close enough, you can see that it's now. It's got kind of a hard edge around the outside and then we have this. Third one or this fourth one, excuse me, which is the other segments going around the circumference and if we change that to a low number like four, then we'll have something more like a square. And so this is that number that's going to, as you increase it. It's going to make it look more and more like a circle. So if we bring that to maybe eight, then we'll have a Octagon tube then if we bring it back up to a 100 it look more like a circle. And let's go and bring this up as well maybe around 16. So the tube looks more like a circle and there we go so again those are just a few different types of geometries that you can create and as always I want to encourage you to get more familiar with your documentation and the types of shapes that you can create there. So thank you for watching and I will see you in the next lesson.

Back to the top