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

2.7 Working With Multiple Geometries

In this lesson, you will learn how to add dozens of shapes to your scene and randomize some of their properties.

Useful Links

2.7 Working With Multiple Geometries

Hello, and welcome back. In this lesson I wanna talk about how we can create a bunch of geometries in our scene at the same time. And we're gonna randomize some other properties and maybe create an interesting animation in the process. And what we're gonna create here, you'll find something similar if you look through the examples on the three.js website, but I'm gonna do kind of my own thing with it. So I'm using an older code pen here that we used earlier, and you can find the URL for that starting pen in the course notes for this lesson. Once we get started, we're going to fork that, create a new copy and I'm gonna do a couple of things here. First of all, I'm gonna get rid of the torus and we're just gonna be dealing with box geometries. So I'll just put a box there for now. I actually gonna do something little different. But then I'm gonna take our shape rotations and I'm just gonna comment that out. So we have our cube there and what we are actually gonna do is we are gonna create a whole array of cubes. We are going to create a lot of cubes on the stage. But the first thing I wanna do is something we haven't done before, is I wanna jump to our renderer where we initially created it here. with our new THREE.WebGLRenderer, and I'm going to create a JavaScript object in here, inside curly brackets. And I'm gonna create an alpha property here and set it equal to true. And all that does, as you can see, is it gives us a white background, it gets rid of the black background that it puts there by default. So I'm gonna scroll down to where we're creating our shape. And right now we've just got this box of geometry that we're creating. And I'm actually gonna create something a little bit different. So I'm gonna nudge our material and all of that down. And we're actually gonna put some of this inside a for loop. So, I want to go to my Settings here and go to my Behavior. And since I'm using a loop, I want to disable the auto update just to make sure that we don't accidentally create a endless loop while we're coding. And one thing I wanna change about our geometry here is instead of a box geometry, I'm gonna create a box buffer geometry. And instead of the default size of width, height and depth of one, I'm gonna set those to a value of 10. So the next thing I want to do is I'm gonna create a variable here called boxCount. And this is just gonna keep track of how many boxes we're gonna place in the scene. And I'm gonna do 1000, we're gonna put 1000 different boxes here on the screen. And remember we talked about box buffered geometry earlier, you instantiated the same way you do a box geometry it basically looks the same but when you're using a lot of shapes like we're about to do, the buffer just runs a little bit smoother. It's a little more efficient. So we have our box count and now to we're gonna create a loop a, a for loop that's gonna run 1000 times. Cuz we're gonna create 1000 different boxes. So every time we loop through this we're gonna create a new box. So, we're gonna run this as long as i < boxCount, i ++ and there's our loop. So now we're gonna create a material and we already have a material here and it's gonna pretty much be the same. But we're gonna change something on it, let's go ahead and cut that and I'm gonna place it inside the for loop. And the one thing I'm gonna do that's different here is I'm gonna randomize the color. Now if you want to do a random number between, let's say, 0 and 10, you would do something like this, Math.random() * 10, and that would give you a random number between 0 and 10. But you can also do that with hexadecimal value. So instead of putting the number 10 here, I want to come up with a random color. So I'm just gonna choose a random value between 0 and ffffff, and the way we do that is we simply do math.random *. And then remember, when we're using hex values in three.js, we're gonna start it with a 0x and then our six digit hex code. So it's basically gonna create a random color somewhere between black and white. So we're gonna have all kinds of shades of boxes on the screen. And for all of these shapes that we're gonna create, they are all gonna have different materials but they are all gonna be based on the same geometry. So we're gonna be using this geometry for all of our shapes. So now when we create our mesh, I can grab this mesh here and just cut it and paste it inside the for loop. And we're gonna pass into the geometry that we created up here and the material that we just created inside this for loop. So again, let me nudge this over. So now it's gonna take our geometry and our material, it's gonna bring them together into this shape and then we're gonna randomize some of the properties. We're gonna randomize the position, the x, y and z positions. We're gonna randomized the x, y and z rotations as well as the x, y and z scale. So they're all gonna be different sizes and they're all gonna be oriented and positioned differently. And just so you don't have to watch me type out all of these Math.random(), I'm just going to copy and paste the code that we're gonna use here. So I have created three variables here for our position px, py and pz and we're just placing them at a random location in between -50 and +50. So we're doing math at random times 100- 50. Same thing for py and pz. Then we have rx Y and z which is gonna be our rotation. And note that in three.js rotation is using radiance not degrees. So instead of doing Math.random() * 360 which is what we would do if it were degrees. We're doing Math.random() * Math.Pi * 2 because there are two pi radiance in the recircle. So that will give us a random rotation, and then we have sx, sy, and sz, which are going to determine our scale. So each one of those is gonna be set to a random number between 0 and 0.5. So once we create all of these random numbers, we then need to assign them to our shape, so we'll point to our shape and that will set our position first. Now remember you can do this by saying shape.position.x = and then shape.position.y, and then z. Or we could just do it all at once with shape.position.set. And then we'll put the x, y, and z all together inside the parentheses here. So we'll do px,py,px,py,pz. Then we do the same thing for our rotation. So we're gonna do shape.rotation.set. And here we're gonna do rx,ry,rz. And then we'll do the same thing for shape.scale.set. And so here, we'll set sx, sy and sz. So we've created a bunch of shapes here and we've created a thousand different boxes, and we've given them all random locations, random rotations and random sizes. And then remember, after we create our shape, or our mesh, we then need to actually place it in the scene, because until we do that, it's not actually gonna show up there. So we're gonna say, scene.add(), and the name of our mesh, which in this case is called shape. So now that we've done that let's bring this over a little bit, make a viewable area a little wider, let's save our file and then let's run it. So once we run it we can see a bunch of shape on the stage all spread out in different areas, different locations, different colors, shape, and rotations. And that looks pretty cool. Another thing we can do here is we can go down to our animate loop, and inside our animate loop we can add some rotation to our scene. Now we've rotated our shapes before but now we can actually rotate the whole scene if we want. So we can do scene.rotation, and I'm just gonna do a Y rotation here, so .y +=, let's do .01. So once we save that and run it again, we should see our entire scene animating around, spinning in circles. And things that are too close to the camera are gonna look a little weird when they pass in front of the camera but another thing we can do is move our camera back and make it look even cooler. So let's move our camera back quite a bit, right now it's set to five. I'm gonna bring it back to a value of 100 and we'll see what that looks like. Let's save that and run it. And there we go, so now we can see our entire scene. All of the shapes in our scene spinning around all as one. And that's how you can create multiple geometries and animate them all at once in three.js. So, thank you for watching and I'll see you in the next video.

Back to the top