7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 8Length: 45 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Dodecahedrons in Space

In this lesson, you will take a look at the starting point for our next project. This one starts out similarly to our first project, but with an updated look and feel.

Useful Links

2.3 Dodecahedrons in Space

Hello, and welcome back. In this lesson, I want to introduce you to our new project that we're gonna use as a starting point for our next demonstration. And for our next demonstration, we're gonna be creating some orbit controls, which are going to allow us to click and drag on our viewable area, on our scene in order to change the camera position, and angle, and a few things like that. So it's a really cool effect, and it's really easy to achieve, but we need to include some other things first. But before we get into all of that, let me just point out how our new scene was constructed. Now as you can see, it's very similar to our last scene in that we just have a bunch of shapes spread across space here, and they're all set to random sizes. And we have, in this instance, we actually have an extra un, we have a large one here in the center. And these are all dodecahedrons instead of boxes. And you'll notice that there are a unlimited number of colors here. In the last example, the color was completely randomized for all of our shapes. Here we're limiting it to four different colors. So we've created this colors array with four different items in it, and we're going to randomly select a color for every shape that we put in our scene. So for the most part, a lot of this is setup the same way as our last one. But once we get down here, here's our generic geometry that we're gonna be using for all of our small shapes. And you'll see that it has a radius of 1, and we're creating 1,000 of those. And then our 1,001st shape is gonna be this large one in the middle, which we're creating with this centerGeometry, and you'll notice it has a radius of 7. And so we've got the centerGeometry here, we've got a variable called colorIndex. So this is the randomized index that we're going to apply to our colors array in order to select one of those random colors. So we're just doing Math.random times colors.length- 1, and then rounding it off to get to the index of the array we wanna point to. And then when we create our material, we're using that color index in that array to pull that random color. And then we're creating the mesh that we're calling centerShape, and then adding that centerShape to the center of our scene. And then we're running this for loop, which is looping through 1,000 times, it's this shapeCount value that we created up here. So we're looping through that 1,000 times, and each time we're gonna create a new shape. You'll notice, we're creating a new random number here, and using that new random number on our new material, and then creating our shape. Then just like with the other one, we're randomizing the position and rotation. We're also randomizing the scale, but this time we're doing the x, y, and z scale all with the same values since we're using dodecahedrons instead of boxes. And then everything else is set up the same way. You'll notice that everything has been taken out of the animate function except for the essentials, the requestAnimationFrame and the renderer.render. So those are still there, but all of the animation has been removed. And this is our starting point. Now, let's jump over to the three.js website to take a look at what we're gonna do. So if we go to the examples link, when we go to threejs.org, let's go to examples. And then I'm gonna do a search here for orbit, and here we have something called controls / orbit. You can also get to this from the documentation page doing a search for orbit there as well. Then I'm gonna click on this, and it's gonna give us an example of how the orbit controls work. So if we click on this screen and drag around, we can change the view of our camera. We can also use the mouse wheel to scroll in and out. Or if we click down on the mouse wheel and move our mouse up and down, we can scroll in and out that way. And then we can also right-click and drag to pan. And all of that is done with just a few lines of code, as we'll discover in the next couple of lessons, but I just wanted to show you that. Now, the important thing to know about this, and we can go back to our documentation here to see this. But if we do a search here in our documentation for orbit, here's our OrbitControls link here. You'll notice that it tells us, as with all files in the examples directory, you will have to include the file separately. So the OrbitControls are not available to us by default, just because we've loaded in the three.js framework. We're going to have to actually point to the OrbitControls separately. Now, if you've downloaded the entire three.js framework in a Zip file, you will have a file for the OrbitControls there, and you can just link to those from your HTML file. Since we're doing this differently, we're doing this in CodePen, we need to set it up in CodePen in our settings. And if we click on Settings, you can see that I've already set it up here. We have threejs.org/examples, etc, etc. Let me show you how I found that. If we go back to our OrbitControls here and then go to three.js. Actually, we can back up and we can get to the example again just by clicking on this link here. And that will take us to the same example that we saw before. So if we go to this example, and then I'm just gonna right-click over here on the left and do a View, actually let's do an Inspect, that'll make it easier. And I'm gonna go to Sources, and in our Sources, I'm gonna scroll down to our viewer, which is gonna be this section over here on the right. I'm gonna go to our viewer and expand that out. Inside that, we'll see threejs.org, I'm going to expand that. Then we'll find our examples folder, I'm gonna expand that out. And then our js folder, and then our controls folder, and inside that we have OrbitControls.js. And if I right-click on that and open it in a new tab, we can see that JavaScript file. And we can also see this here, this URL is the one that we're linking to in the settings of our CodePen. So this link here will make those OrbitControls available to us. And in the next lesson, we'll jump into the same file, and we'll talk about how to make our OrbitControls work for us. So thank you for watching, and I'll see you then.

Back to the top