2.1 The Three.js Website

Hello and welcome back. In this lesson, I wanna take a look at where we can go to find more information about the three.js framework. And, as you can see, we can get to the threejs library at three.js.org. And, on the home page here you'll find dozens of examples of websites that use the three.js framework in one way or another, and this can be a great source of inspiration for those of you who are trying to learn 3D in the browser. And you'll notice you can even submit your own project over here on the upper right. And then on the left, this is where, kind of, the meat is. So we have our documentation, our examples, and then we have a download link that was a few links below that. The download link will download a zip file to your computer that you can then use on any websites that you wish. Now, in this course, we're gonna be using codepen.io to create our codes. We're actually gonna point to an external CDN In order to point to our three.js framework, but if you wanna develop locally you can download the code here. Now, as with any framework, one page you really need to get familiar with, or one section of this site you need to get familiar with is the documentation. If we click on that, that will take us to a kind of a run down of first of all summary of how you can get things up and running in three.js, starting with creating a scene. And we'll talk about how to do things like that very soon. But over here on the left you'll find a lot of navigation on the entire documentation for three.js. And as you can see scrolling through that there's a lot to it. So, this is gonna be a very valuable resource for you. And you can even type here, to kind of filter these results. So if I want to learn how to create a sphere for example, I can start typing in sphere and then we can see some of those search results down here. And then we click on sphere geometry and that'll show us how to make a sphere in three.js. And we scroll down, we can even see some code examples here on how to get that up and running. And yeah, that's gonna have a lot of really useful information for you, as well as an example. Now, not all of these pages are gonna have examples of code in action, but some of them do. Now, if we go back to the main three.js website, you'll notice right here that we're on revision 93, that's what r93 is. We're on version 93 of three.js. And one thing to keep in mind with this framework is they do update it a lot. So, if you're looking for tutorials about three.js online, you need to pay attention to what revision they're using because things do change a lot and you might find a lot of old tutorials that no longer work if you're following along with the code that they're entering in. So you want to make sure that you're using the same revision for whatever tutorial you're looking at, or you need to recognize the bits and pieces of what they're doing and then know how to find the current version of what they did in the documentation. So it's really important to become familiar with the documentation, I definitely want to suggest reading through everything under the getting started section. It looks like a lot of links, it really doesn't take that much time and it's definitely worth it if you want to learn how to use this. And then, as you have time or as you're working on different projects, you can get familiar with all the rest of this framework. And it's, again, a very powerful framework, and it's got a lot to it. So it's gonna be very important to get familiar with this documentation. Now, again, I'm gonna go back to the main site. And, again, we are on revision 93 here. Now, I mentioned, there is the download link here, but we're not gonna be using a download for this course, we gonna be using CodePen for all of our code here. So, instead we gonna search for CDN. And, if you just do a search for three.js CDN in Google, it'll probably be the first search result here, the cdnjs.com. Click on that, and here you can even choose what version number you want, and that's going to be helpful for us. And we want revision 93, and so that's the one that we're seeing down here. Now you can get the three.js file here, or the three.min.js. I prefer the min.js because it's gonna be a little bit more efficient cuz there is a lot of code there, but if you really want to learn the code, if you wanna dig into the three.js code and figure out how it works, then the three.js file might be useful for you, but I would suggest actually getting that from the download, so you can just download it to your machine and look at it there. So we're gonna be using this min file here in CodePen, so I'm just gonna copy that. And then I'm gonna pull over a new codepen that I've created, and I'm gonna go into our settings, I'm gonna jump over to JavaScript here, and one thing you can do here in the JavaScript is you can actually search for three.js. But if you are searching for a framework like this make sure you notice what version of the framework you're using. And the only one that shows up here is revision 83, so this is an older version of three.js, which is why I directed you to the CDNJS website because here you can find the most recent version and use that most recent version in your code. So I've copied the most recent version here, the minified version, and now we can go back to CodePen and instead of using this one here that we search for in CodePen, we can just go to the line below that and paste that CDN library that we just copied. So we are now pointing to version 93 of three.min.js. We can save that and close it. And now, we're ready to go in our codepen file. So we'll get started talking about how to build a basic three.js scene in the next lesson. Thank you for watching.