2.2 Creating a Scene

Hello and welcome back. In this lesson, I want to jump in to JavaScript and show you how to set up a basic seam in Three.js. And when you're using the framework there are three essentials that you're gonna need For every scene you set up you gonna need a scene first of all. You gonna need a camera, and you gonna need a render, and you'll find yourself creating these three items any time you set something up, in Three.js. So again, we're using the CodePen we ended with the last lesson where we went into our settings and we pulled in these Three.js framework into our JavaScript section here. And again, as I mentioned before we're using revision 93 here. So there may be a newer revision out there by the time you watch this course but that's the one we're gonna be using as we work through our files here. So let's talk first of all about how to create a scene in Three.js and this is going to be the easiest part. All we need to do is to create a variable, and let's just call it scene. And we're gonna set this equal to a new instance of a Three.js scene. So the way that works is we're gonna type in new and then THREE with all capital letters, .Scene with a capital S, (); to end our statement. So this is a pattern you're gonna see a lot as we're working in Three.js. We're gonna be creating a new instance of THREE dot something. So we're gonna be using something very similar when we're creating cameras, when we're creating renderers, when we're creating different, what are called, geometries in Three.js. So again, you're gonna see this type of construction quite a bit as we move forward. So we've created our scene, it's stored in this variable, and a scene by itself isn't going to help you very much. But once we start adding things to our scene then we'll be able to see things going on in the browser window. So we have our scene, the next thing we need is a camera because we're not gonna be able to see any of our 3D objects unless we have a camera pointed a them. So, on the next line I'm gonna create another variable called camera and there are multiple types of cameras in Three.js. Fore now I just wanna focus on what's called a perspective camera. And the way we create this again, is very similar to what we saw when we created a new scene. We're gonna say new THREE, all capital letters, dot, and then the type of camera that we're gonna create. And again, this is called a perspective camera so it's gonna be Perspective with a capital P, and Camera with a capital C, (); to end our statement. Now for our perspective camera, there are a few things we need to include inside the parenthesis here. We need a field of view and aspect ratio and then a near and a far value, and we'll talk about those as we move through. The first thing we need is a field of view, and this is gonna be in degrees. And this is basically going to determine how wide of an angle your camera lens is. So if you have a wide-angle lens, then you're gonna be able to see more things up close because it's gonna have a little bit of peripheral vision to it. But if you're having narrow or field of view which is represented by a smaller angle here then you'll be able to see more of what's right in front of you. So I'm gonna pick a medium number somewhere around 75 degrees. Now, the next thing we need is an aspect ratio, and your aspect ratio is basically your width divided by your height. And when you're dealing with it in Three.js you wanna stick with the width of your viewing area and a height of your viewing area. If you're creating something that's gonna take up the whole body of your document, then you're gonna get width and height of the body of your document. If you're just gonna put it inside a div or something like that, it has a fixed width and height then you would set it that way. For this particular tutorial, I'm gonna set to the four width and four height of our viewable area, and we're going to pull those values using window.interwidth and window.innerheight. So before we actually create our camera, and I'm gonna put a comment here and we'll go ahead and put a comment excuse me up here at the top so we can keep track of all the things we're doing here. So first we're creating the scene, then we're creating the camera. So again, before we create the camera we need a width and height. So I'm gonna create a variable here called width and I'm gonna set that equal to, again, window.innerWidth; inner statement. Create another variable called height and set that equal to window.innerHeight. And then our aspect ratio is simply gonna be our width divided by our height. So we can create another variable here called aspect and set that equal to width / height, the two variables that we created up here. So now inside our perspective camera constructor here we've got 75 for our field of view comma space, next we need our aspect ratio. You could type this out if you wanted to, if it was gonna be 16 by 9, then you could do 16 divided by 9 there, but we've already calculated ours and stored it in this variable called aspect. So we'll just enter in aspect there and then we need our near and our far values. Now, sometimes depending on what you're rendering this might be numbers that you'll just need to mess with a little better, experiment with. But basically what this numbers do is they determine how much of your scene is gonna be rendered. So for our near value, let's say that we have one for our near value and 1,000 for our far value. Anything closer than one unit away from the camera is not going to be rendered. Anything further away than a 1,000 units away from your camera is also not gonna be rendered. So you're only gonna render things that are within this particular range, within this distance from your camera, from 1 to 1,000 units. And that's really all we need for our camera, we need these four items here, the field of view, the aspect the near and far values and now our camera is set. So the next thing we need is a renderer. So we'll create another comment here that says create the renderer and we're gonna create a variable here. I'm gonna call is simply renderer. And we're gonna set this equal to a new renderer, now there are several types of renderers in Three.js as well. And the most modern and most efficient renderer at the time of this recording is gonna be your WebGL renderer. And the WebGL renderer makes use of hardware acceleration which basically just means that it's gonna end up running more efficiently in browsers that support WebGL. And all modern browsers or at least all the big modern browsers do currently support WebGL. If you have to support older browsers then I would encourage you to go back to the documentation and take a look at the other types of renderers that are available in Three.js. But for the purposes of this course, we're gonna stick with the WebGL renderer. So the way that we create that is we create new THREE in all caps and then .webGL, G and L are both capitalized there, and then Renderer with a capital R (); to end your statement. Now, optionally, you can also put a JavaScript object inside the parentheses here and include some properties there or some settings for your renderer. But we're just gonna leave it at the defaults for now. The next thing you wanna do is set the size of your renderer. And these are just things you're gonna get used to doing over and over again. So we're gonna do renderer. And then there's a method called setSize with a capital S, and then we're simply gonna set the width and the height of our renderer. And we've already stored those in variables, so we're just gonna point to those variables here, width and height and there we go. So we've created our scene, we've created our camera, we've created our renderer, the last thing we need to do is to attach the renderer to the page or to the DOM. And there is a property of the renderer object called DOM element and that's the property that we're actually going to attach or append to the body of our document. Now you can do this one of two ways, you can append it to the body itself if you want it to take up the full size of your document. Or if you want to put this 3D scene inside a container element, you can create a container in your HTML and then point to that container and attach the renderer to that container. So for now, I'm just going to append it to the body of our document. And the way you do that is we simply point to document.body.appendChild and the item that we're appending is render.domElement. And once we do that, we see this big black rectangle appear on the stage. And we can scroll up and down, you'll notice that it did create some scroll bars for us and the main reason for that is that there is some default margin in our body. So we can jump into our CSS and create a rule for the body element and set margin to 0. And that's not gonna get rid of all of our scroll bars here. You'll notice there's still a little bit of extra space there at the bottom and in the right. So another thing we can do here is simply set the overflow to value of hidden and that should get rid of the scroll bar for us. So now we have this fresh scene that has been rendered to the page and all we need to do now is start adding some objects to it. So we'll get started on that in the next lesson.