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.4 Modifying Vertices

In this lesson, you will learn how to move the vertices of your Geometries around in order to create new, unique shapes.

Useful Links

2.4 Modifying Vertices

Hello, and welcome back. In this lesson, we're gonna take a look at how we can customize our geometries by moving the vertices of those geometries around. And, this'll be most easily illustrated with the ones we've created so far with the Dodecahedron. So I’m going to create a new copy of our current code pin. And you can find our starting pin in the course notes for this lesson. I’m gonna Fork that, create a new copy and all the changes we make will be saved here. So I’m gonna get rid of the Torus for now, I’m gonna get rid of the Cone in the box, and I’m gonna uncomment the Dodecahedron. I'm also gonna come down to our animate function here, and I'm gonna comment out all of our rotations so that we have it just sitting still in a fixed position. And what I wanna do, is I wanna take all of the vertices of our shape here and I want to randomly animate them into different positions. And I want to make a couple of changes to our settings first. The first thing I wanna do I want to import another framework. So if we open up our settings and go to the JavaScript tab, you'll notice we have three.min.js. I also want to import a framework called TweenLite. Which is a way that we can create some animations really easily in JavaScript. And if we search for TweenLite, and that's tween L-I-T-E, we should see a result for that here and we'll click on that and it will fill that out. And then I also want to import the EasePack for TweenLite, which allows us to create some more easing functions. And so we'll do a search here for easepack as well. And there we go. So we've got the latest TweenLite and the latest easepack, and we're good to go there. One more thing I wanna do is, I wanna jump over to the behavior tab and you'll see we have this Auto-Updating Preview. Usually it's okay to keep this turned on, and what this does is when we make a change in our code, it automatically updates in the window to the right. But in our code, we're gonna be creating a loop that is gonna loop through all our vertices in our shape. And when we're creating loops like this in code pen, sometimes the auto update will cause an endless loop to kind of freeze the page. So the only way to really get around that is to disable everything. So I'm going to uncheck the enabled under auto-updating preview. That way it's not going to automatically update whenever we change our code. Instead, once we're ready for it to update, we'll just click on the run button. So what I wanna do is again, I want to animate all of the vertices of our shape. And our vertices are a part of the geometry itself, this dodecahedron geometry or any other geometry that you're working with. And those vertices are a property of that geometry and they are stored as an array. They are an array of points. And what I wanna do as I animate these vertices around me is, I wanna make sure they never wandered too far from their starting position. So in order to do that, we need to keep track of what this starting position is, because once we move them, we are gonna loose that starting position. So what I'm gonna do is after we create the shape, let's put another comment here that says that we are gonna store the original positions. And again this is, we are gonna store the center in array first of all, and I'm gonna call it original positions and we're gonna say that is equal to an empty array. Now again as I mentioned before, the vertices are stored in an array as well. And I want to create a four loop that's going to looped once for each vertex in our geometry. So I'm gonna copy some code here just to save us a little bit of time, and I'm gonna paste it. And so here's our for loop, what we have is we've set i to 0 and then we're gonna run this as long as i is less than geometry.vertices.length and this vertices property, that's the array of vertexes that we have. And then we're gonna increase i by one of course, and then inside this loop we're going to store the current vertex in this variable that we called vertex, and we're also going to store that position as another array. So we're gonna have kind of an array inside an array here, and this inner array is gonna store the x, y, and z positions of that vertex that we’re referring to here. So our vertex position is stored here, now we’re gonna push that vertex position into our original positions array. So once we're done looking through this, we will then have an array that stores all of the x,y, z coordinates for each of the vertexes or vertices I should say, of our shape. So the next thing I wanna do, is I want to create a function that's going to animate all of these vertices. And again, I'm just going to copy and paste some code for the sake of time. And we will walk through this code so that we can make sure we understand it. So we have this animate vertices function now, inside that function we're again creating a loop that's going to loop as many times as we have vertices in our geometry. And the purpose of this particular loop is to point to a particular vertex and then move it to a random position that's not too far from its original position. So the first time we loop through this i is gonna be equal to 0. So if we point to geometry.vertices[i] it's gonna point to the very first vertex in that array of vertices, and we're gonna store that first vertex in a variable called v. Then for our x, y, and z coordinates, and these are gonna be our new coordinates. The coordinates that we're going to animate to. What we're gonna do is we're gonna look at our original positions array, which if you remember stores all of our original x, y, and z coordinates. We're gonna look at the i index, so the first time we through i is gonna be equal to 0. So we're gonna be looking at the first item here, you'l notice there is another set of square brackets, point to the inner array. And the inner array, remember as we created the area up here, has three different items in it, it has the x-coordinate, y-coordinate and z-coordinate. So zero is gonna point to x, 1 is gonna point to y, 2 is gonna point to z. And so, we're gonna take that original position and then just offset it by a small random numbers. So we're taking Math.randomtime 0.6- 0.3. So it's gonna create a random number anywhere between negative 0.3 and positive 0.3, and it's gonna add that random number to our original x-coordinate. So all of this is doing here is it's creating and storing a new set of x, y, and z coordinates, and then we're gonna use TweenLite to animate each vertex from it's current position to it's new position. And so the way TweenLite works and you can do a search online for TweenLite. We also have some tutorials on TweenLite also known as GreenSock or the GreenSock Animation Platform. But TweenLite is just a piece of that GreenSock Animation Platform. We do have some tutorials for that on tutsplus but, it's really simple to do an animation we're going to do a TweenLite.to, another words we're animating from the current position to the new set of values that we put in here. So, the first item inside the parenthesis here is the object that we're animating, and we're animating this vertex. Remember we're inside a loop here, so this is gonna run once for each vertex in our shape. So we're gonna animate the vertex, that's the first item here. The second item is how long it's going to take, how the animation is gonna take in seconds. This is gonna take half a second, so 0.5. And then our third item is a JavaScript object inside curly brackets. And here we have a series of property-value pairs. And each property here is a property that we're going to animate on our shape. We're gonna animate the x-coordinate, the y-coordinate and the z-coordinate, and then after the collon we are telling it what new value it's gonna have when the animation is done. So its gonna animate from its current exposition to this new exposition, same thing for y and z. And then I added this easing function at the end, and that's why we needed that other ease pack plugin for our codepen. And this just makes the animation look a little bit more interesting by adjusting the speed of it. And so that's our animateVertices function. And so what we wanna do is we wanna run this animateVertices function over and over again with a little bit of a gap in between. Now each animation is gonna take half a second. And so if I were to come down here and just call this animateVertices function, let's just make sure it works. So we'll call animateVertices open and close parentheses, semicolon to end our statement, and now we'll see if all of our hard work has paid off, so we're gonna save our file, and run it. And you'll notice that nothing happens. And there's a reason nothing happens. If we scroll down to our animateFunction here, we need to add something to this function because even though we are rendering the scene, we need to tell Three.js that our vertices need updating. Because in order to stay efficient and to run efficiently by default, Three.js just assumes that they don't need to be updated. So inside our animateFunction, this the function that runs over and over again at the screen's refresh rate. We are going to add another long line here that's simply going to tell our geometry that our vertices need to be updated, and we do that by pointing to our geometry which is stored in a variable called geometry dot. We got to spell it right, VerticesNeed with a capital N, Update with a capital U, and we're gonna set that equal to true. So now we're gonna save it again and run our page and there we go, we see them animate from their original position to a new position. Well, now what I wanna do is I want that to happen over and over again, so we're gonna run this animate vertices method inside a timer. And we do that in JavaScript using a setInterval. So inside the parentheses for setInterval we set the name function that we want to run over and over again, which we call animateVertices. And we don't need to put the parentheses here, comma, space, and then how often we want to run that interval. And I wanna run it every 600 milliseconds, this number here is in milliseconds. Because that's a little bit longer than the length of the actual animation. The animation is half a second which would be 500 milliseconds, and we're gonna wait a full 600 milliseconds for that to happen. So once we've done that, we can save it and run it again, and now we see the shape animating over and over again. And you'll notice that each of the vertices never gets too far from its original position because we stored those original positions and just created a random offset for them. And then one more thing we can do to make it a little more interesting is we can come back down to our animateFunction, grab our commented out code here, and turn it back on. So that our shape will rotate as well as change the position of its vertexes or vertices. So we'll save that and run it again, and not only will the vertices be moving around, but also the shape will be rotating. So that's just one way that you can change or alter your shape, by playing around with the positions of vertices. So thank you for watching, and I'll see you in the next lesson.

Back to the top