 Okay, as always, this is part of a series. There should be an annotation on the screen to the full playlist. I recommend watching all the previous videos. We are going to start fresh with a script today. A lot of it's going to be review, but we're going to reorganize stuff, make things a little more organized, yes. So be sure to watch the previous videos or you might be lost. Again, we're working with 3JS in HTML5, 3js.org. You can go down there, download the full package. There's plenty of examples and documentation. So far, we've been working with the main minimal 3JS script. Today, we're going to work with another script that comes within that package called TrackBallControls. I've already started to create a file. I've already downloaded the TrackBallControl.js. It's in the same directory. Also, there will be a link in the description to this file, as well as all the other files in the series in the description below. But I recommend going to 3js.org and getting the full package with all of the example files and playing around with those as well. I've already started creating a basic, basic HTML file here. I've called it basic TrackBallControls.html. I'm going to go into that. So far, I've added HTML tags, body tags, and I've imported the minimal 3JS JavaScript, which is in my current directory. Now I am also going to import the TrackBall, which is TrackBallControls.js. Again, I've put that in my current directory. Really, if you're working on a site, you probably would make a separate folder for all your JavaScript to keep things organized. But for these tutorials, I'm just putting everything in the same folder. But it's all up to you on how you want to organize stuff. So I've imported that script. Now we're going to work on the main portion of our code. So we're going to create some script tags here. And we'll create some variables here at the very beginning. We'll say var will create a camera variable. And all these variables will define later on. They're going to be objects. But it's just nice to have these all listed at the top here. So our camera, our controls, which we're going to be using, the TrackBallControl.js file for that, a scene and a renderer. Now also in the past, we kind of just started writing our code right in here. We're actually going to create an initial function, which we'll run initially. So let's just say init, that will be the name of our function. We're calling it here. We'll create it in a moment. And then after that, we'll also create an animate function, which we'll run right here, right after the init function is run. And previously, we made an animate function that animated the rotation of whatever object mesh we were working with. This time around, it's actually going to be a simpler little part because our TrackBall.js is going to actually be doing a lot of our animations. It's going to be using the mouse to control the camera. So now that we have those called, let's start creating them. We'll say I could type today function init. So up here, we're calling it. Down here, we're creating it. It doesn't matter if you call it before you create because JavaScript loads all into your RAM before running. Let's give it our curly braces here. And the first thing we're going to create here, let's create our camera. So we've created the variable up above within our main script, but here we're actually going to define what it is. So we'll say camera equals new three, all capital. There it is, case sensitive, perspective, camera. And so that's, as we know, we're just creating something new. And from this little part here with the capital three, we know that we are calling that from our three JS scripts up here. So this one's going to be out of our main script. Let's remember to put our semicolon there. And now let's give it some parameters. We'll say 45 here, I think is what I've put in the past tutorials somewhere around there. Window, inner, width. So here we're defining the aspect ratio. So we have, we're saying make it the full width at the screen, forward slash, we'll say window dot inner height. So we got our height and width is going to be the full screen. Be sure to spell things properly, like not throwing extra Ds and mixing I and E's. And now we're going to say here one, I think in the past we might have done 10 there, but we'll say a thousand. And that's what we can visualize in depth, close and far away. And you'll see that actually in this tutorial where you didn't really see its function in previous tutorials because our cubes or objects were always in the same spot, which in this case the object's not going to move but our camera's going to move away. If you move far enough away, it will clip off the object and that's what that's defining right there. So here we've created a camera by default. It will go right to the center of our scene. Let's move it out or at least up a little bit. We'll say camera dot position. Again, spell things properly. Position dot z which is up and down and we'll say 500 here. And now up above again we create controls. Let's define what those controls are. So we'll say controls and it's real simple. We're going to say new controls, so new. And again three because we're going to be calling from our 3JS library which the track ball controls is part of. And we're going to say so from three find the track ball controls. And what do we want the track ball script to control? That library to control, it will be our camera that we just created and defined. So now that we have that, let's go ahead and every time something changes with that control we want it to update and re-render the scene. So here we're going to say controls. So that same object we've already created. We're going to say add an event listener. Again, if you've watched my old tutorials on Pi Game you're familiar with event listeners. Basically it's listening for events. Really any type of GUI interface has event listeners, QT or GTK. So hopefully if you've done some program before you've known that but basically we're saying here is okay. We got our controls which in this case is going to be mainly our mouse is going to be controlling the camera. We're going to say listen, this is an event listener. When something happens, an event happens. Listen, what event will when something changes. So when it changes what happens we're going to run a function called render which we will create momentarily. So, so far we've started creating one function but we've called three functions. Init, the initial function which is what we are creating here. Animate which will create momentarily and render which will create momentarily. So now that we have that let's start creating our world, our scene. Let's say scene equals new three dot scene. Again remember case sensitive here. So capital S there, capital three. And again we know that we're saying three here. It's going to be looking at something within the libraries we got with 3JS. Okay, so now we've created our scene. Let's make some things to put in the scene. And what we're going to do is we're going to create a basic cube. Now in previous tutorials we said you know create a new 3JS mesh and then we said within that we said three, it will be a new three dot cube geometry and then we gave its parameters which were its sizes, its height, width and depth. And then we said comma and we said this type of material and we said new three JS either a mesh normal material or a mesh Lambert material or a mesh Fung material. And so hopefully you watch those tutorials and you know what I'm talking about. Instead of doing it all in one line, we're going to break it up into separate lines and you'll see why in future tutorials. So although you can do it all in one line, what we're going to do here is we're going to say var and we'll create the geometry here. So we're going to have our, you have three different things. We have what initially or finally we're going to create our mesh. Well the mesh needs some sort of geometry and the material. So let's create the geometry and we can call this what we'd like. I'm going to call it geometry. It's going to be a cube but in future tutorials we might change that. So I'm just going to give it a more generic name that way. I don't have to rename it every time we do a tutorial to keep things making sense. But we're going to say create an object, geometry. What is that geometry? It's going to be a new 3JS and since we're creating a cube, it will be a cube geometry and again case sensitive here. And since it's a cube we need to give it a size, we'll say 100 by 100 by 100. Don't forget our semi colon. Okay. So next we have our geometry. We're also going to want a material to apply to the mesh when we create it and put the geometry in there. So we're going to say var and we're going to say material equals new 3 dot and we're just going to do a normal material. So we'll say mesh normal material. Okay. So we create our geometry and we create our material but now we have to take those and apply them to a mesh. So we'll say variable and we'll just call it generic mesh. Again, it's on this side of the equal sign. It's like this, this, this, this, this. These are names that we're giving it to describe what it is but we can call them whatever we want. I'm going to call it mesh once again just to be a little generic here. We're going to say new again calling 3JS script. But doing this it's basically the 3JS is taking care of all the heavy lifting for you. And all the hard work, we just need to tell it exactly what we want to do and it does it. And we're going to say that it's going to be a new 3JS mesh which we've done previously. Now as I said in previous tutorials basically inside our, we're passing this function here inside these parentheses. We passed this and then comma this. We just separated it out to make it a little bit shorter on this line but it allows us to, and as again we'll go over this in future tutorials, we can apply the same material to multiple objects and it saves us some typing because we just have to put material each time or whatever we call that material. Same with geometry. Again, we'll look at that more in future tutorials. So here we're going to say instead of typing all this out we're saying this which equals that. Makes sense? Hopefully it does. We're not going to say appear it there. We're going to say comma and we're going to say material. So we've created a mesh that has a geometry and a material. Now it exists but basically in La La Land. It's in another dimension. We can't see it. It's another plane of existence until we take our scene and we add to it that mesh. So we have our scene that we created up here and we're adding to it this mesh. And anytime you create a new object whether it be a light or a mesh you have to add it to the scene before it is seen. So now we need to create our renderer. And again, we're putting this I think in previous tutorials I put this kind of towards the top. Here I'm putting it towards the bottom. As long as it's within this initial function so it will start rendering, that's fine. We created it up here but we didn't define what it is. So we're going to say renderer equals new and we're going to say 3.webgl renderer and now that we've created that renderer we're going to say renderer. And we'll set a size for our renderer. How big of a size we want it to render and we're going to want it to render well the window width and height. So it would be the same as what we did for our camera here. I'm just going to copy and paste that but instead of putting the forward slash here we're going to just put a comma in this particular case. But we're saying make our renderer size the full screen the inner width and height. Now when we created our scene here we didn't pass it a color of any sort in the past I think we passed it white. So by default our background in the scene is going to be black because that's the fault if you don't tell anything else. And in this particular case you'll notice a white border around our renderer and that's because well it's an element in the HTML and it has padding. You can get rid of that with CSS and we'll get into that in a future tutorial. I just wanted to mention that because you'll notice the white border around the black you don't notice it when you have the white background because well everything is white. So here and the border is actually around the body which we are currently in and we need to add our renderer to our body. So we're saying document if you've done any type of very very basic JavaScript you're familiar with this. This is our HTML document. Within that look at the body which we're in and we're going to say append a child to it. So we're adding an element. You can actually also create this with HTML tags inside the body or elsewhere with div tags or whatever but we're going to just do it using JavaScript and we're going to add our renderer that we just created as an element into the body tag. So we create our renderer, we set its size and then we're saying put that inside the body tag. Okay, we're almost done. That is our initial function. That's the first thing that will run when our page loads. Next thing that will run will be our animation function. Let's say function, we'll say animate and we will say give it its curly braces. We'll say request animation frame and we've gone over this in previous tutorial. Basically it's going to continually keep refreshing our screen here so we got that but we also want to take our controls object which we created earlier, controls and we want to update them. So basically this function will run. When does this function run? Well we've called it up here somewhere. Oh that's right, we called it up here. So basically this is constantly making sure our screen is staying animated and we're updating the controls from the mouse. Okay, so last function, a very short function we're going to say function, spell things right, function animate. I'm sorry, we just did that, function render and we're going to say renderer.render where we're going to render this scene and you can have more than one scene and the camera view, from a particular camera view you can have more than one camera and this is going to happen basically in this particular case we call it right around here. So as I said earlier when there's an event, a change based on our controls in this case basically our mouse, when something changes the mouse changes it is going to run the renderer and re-render. It doesn't have to render constantly it just has to render whenever there's something changes. So that's it, if I typed everything right our script should be done. Let's go ahead and save that and I don't think I opened that up in a web browser to start so let's go here, I'm going to say Ice Weasel which is like Firefox and you do want to make sure you and I should have said this in the first tutorial you want to make sure that you're using a browser that supports HTML5, WebGL and all this 3 stuff Firefox, Ice Weasel, Chrome is usually the most up to date but we'll open up this file here it is and we have nothing and so I must have typed something wrong let's hit F12, I have Firebug installed in Firefox but you can use the default Firefox which I think you hit control Shift K to bring up to check the console for errors and I think in Chrome it's F12 as well to bring up that console. Clicked on console here I'm going to hit F5, refresh oh here we go, tells me right here my problem when I'm setting the position of my camera I put 500, we need to put that easy equals 500 so once again these little debugger consoles come in handy I hit F5 there, great I'm going to close this console because everything seems a little fine because we haven't set it to resize our camera and scene when something like that changes that's something I'm going to do in a future tutorial I'm going to hit F5 again to bring this up so once again you notice the white border around it that's just the padding on our body which we can get rid of with CSS and we'll probably look at it in a future tutorial here's our cube our camera is looking at it direct on and what I'm going to do here is I'm just going to click and rotate like this so you can see I am controlling this with my mouse now it may look right here like I'm spinning the cube I am not and I want to make that clear what we are controlling here is the camera because if we had more objects in the scene you would see them moving together because we are not really moving the cube or the other meshes we are moving the camera so we are moving the camera just by left clicking and dragging the mouse around I can also scroll my mouse wheel to zoom in and out or I can center click clicking down on the mouse wheel and drag in and out now you notice when we get far away it gets clipped off that is the clipping we put in the camera 1,000 those are the distances that it will clip the cube away so once it gets 1,000 units away it starts clipping it so left click drag moves the camera around scrolling or center clicking and dragging will zoom the camera in and out and if you right click and drag it does a pan so you can pan around and that is all possible thanks to 3JS's trackballcontrols.js and as you can see here under 50 lines of code to do that which is spectacular and this tutorial has been long enough we are going to add to this more in future tutorials but I want to say thank you for watching I hope you watch all the videos in this series there should be an annotation that will be the full playlist recommend watching all those there will be a new video every Friday if you get to a video in the playlist that you cannot access because it is smart private it is because it hasn't been made public yet there will be a new one next Friday so keep up to date be sure to subscribe so you don't miss any if you are enjoying these HTML5 tutorials especially these 3D ones be sure to like this video so that I know that you guys are liking this topic and I hope you visit my website filmsbychrist.com be sure to check out the links in the description to my website my IRC channel and also links to this code again recommend checking out 3js.org that's t-h-r-e-e-j-s.org that is where you can get this full library plenty of documentation and examples and that is all for today I thank you for watching and I hope that you have a great day