 As always, this is part of a series of videos. There should be an annotation on the screen to the full playlist. I recommend checking out the previous tutorials, or you might be a little lost. Now, so far we've been working with a lot of creating objects and rotating the camera. Let's make a ground, I'm going to say ground plane, but it's not actually a plane. We're going to create a bunch of lines and then make a grid out of them. It's very simple to do. I've created a very basic script here, so I don't have to type everything over again, even though we're starting with a new script here. But I got the 3JS minimal script here. I also should mention that if you're watching this way down the line, some things might change. Some of the documentation, not necessarily the documentation, if you're reading the older documentation or looking at older examples of 3JS, some stuff has become obsolete and been replaced with newer stuff, where so things are relatively the same, but you might be trying to call something that isn't in the regular libraries anymore. And if you have the older libraries, they'll work, but they might be outdated. So I just want to say that so far most of what we've been doing is very basic stuff. But if things change on how they work years down the line, I'm sorry I can't magically change this video. I just wanted to say, because I haven't said that in any of the videos prior to this, I don't have the tracking ball script in here. That's because next week we're going to learn how to do similar things with the cameras without that extra script, just using the basic 3JS script and some math. But today we're going to make a basic grid. And so far we've got our basic 3JS installed here. And we've also got variables that we're creating here, camera, scene, and renderer, which we're pretty much always going to have. Then we're going to call our initial function, which is created here. Initial function, initfunk, a function initch, yeah. Anyway, this is where we assign the stuff that we've created. We created the scene variable here. Now we're going to make it an object based out of the 3JS script up here. We're saying it's a new scene. Camera, we're going to say it's a camera with perspective. It's a perspective camera. And give it some information here. It's going to be the full screen, how close the clipping is, how far away clipping is. This is all stuff that we've gone over many, many times. So I'm just going over it quickly here. We're going to create a renderer once again from the 3JS screen or JavaScript. We're using WebGL in this particular case. And we're going to set the size of that to be the full window with an height. So it will take up the full screen besides the padding around the body, since that's what we're putting it in. So we're going to take this renderer and put it within our body. And then we're going to call it to render once. Since there's no animations or anything in this particular code, we're just going to render it once where normally we would have it render whenever the change in the animation comes, which we will add next week, we've done in the past. So here we go. We are going to just create basic lines and then use a for loop to spread them out. So so far when we've created geometry, we've created geometry such as a cube geometry or a plane geometry or a cone geometry or a sphere geometry. You can also create just geometry, in which case you have to give it vectors and other information. And we're not going to go into too much detail on that in this tutorial, but this is what allows you to create more advanced shapes. See, the cubes and the spheres and the cones and all that are already shapes that have vectors inside the 3JS code where if you export something from Blender as a DAE file or an OPJ file and then you import it into here, and those are just some examples of things we're going to get into in the future, basically they're text files with a list of coordinates for vertices and how they're connected. And luckily there's libraries that will do the math for you, but we're going to create some basic stuff here. So let's go ahead and get started after all that explanation. OK, we are going to say var and we'll just call it geometry. Again, you can call the stuff on the left side of the equal sign, pretty much whatever you want within reason. And we're going to say that's a new and we're going to use the three. Remember case sensitive, and in the past we've done cube geometry and what forth. We're just going to say geometry in this case. And we'll also give it a material. We'll save our material. And again, in our earlier tutorials we put this into our mesh. In this case we're going to be creating a line, not a mesh. And you could do that as well. It's just nice to do it outside of this so you can utilize these things elsewhere, especially when we're using a loop like we are now. It saves a little bit of typing. Line, basic, material. So again, so far we've worked with meshes. This time we're working with lines. And similar if you watched the earlier Canvas tutorials on drawing lines, it's similar. It's just in the 3D world. We're going to give it a color. If you don't give it a color there is a default color. Oops, I didn't mean to put quotations here. I meant to put curly braces. I don't know what the default color is. I'm going to guess black, which is what our background is. It's either going to be black or white. But I'm going to put them white just to be sure. But you can make it any color you'd like. But we're just going to go with a basic white here. Now we're going to make a for loop. But before we make the for loop, let's set some variables. I'll put them up here. Var, we'll say size. And we'll make those 14. And we'll make the steps equal to 1. Now you can put those right in the for loop. But it's nice to have them separate like that to clarify what they are. And so if you want to modify it later, you're going to change those variables a little bit easier than you would in the for loop itself. We're going to say for loop var i equals. And we will say equals the negative size. And we're going to say loop while i is less than or equal to size. So i is less than or equal to size. And then we're going to say i plus equals step. So let's close the for loop before we forget. OK. I could say in here i equals negative 14. And as long as i is less than 14. Now I can say i plus plus, which would add one each time. But again, if you want to change the size and the spacing of your grid, it's nice to have these variables outside of that. And we'll play around with that after we get our main script typed here. So here I'm going to say geometry. And we're going to set some vertices. And we'll push them. And we will say new 3.vector 3. And we're going to say negative size. Let's face things out, just make it look nicer. Negative size comma negative point o dot o4 comma i. And this is, once again, just the measurements for our grid. And to save some time, I'm just going to copy and paste that line, but change size to negative size to size. And then I'm going to come over here. And let's see. Again, to save time, I'm just going to copy and paste a little bit. So here we're going to switch this around and say here, I'm going to say i. Here I'm going to say i. And here I'm going to say negative size. And here I'm going to say size. To just briefly explain what's going on is basically we're drawing lines one way here, basically from here to here, from the negative to the positive. So we're going across the median there, the little middle part. And here, so let's just say we're going left and right here, and then here we're going up and, or forward and back, drawing our grid. OK, so now that we have that, let's go ahead and outside of the loop, far line. So we're creating a new object called a line. And it's going to be a new from our 3JS library line. And it will be our geometry that we have created with the material we have created. And we will say three dot line pieces. And then we will take that and take our scene and add to our scene line. OK, one more thing to do in here, and then we'll quickly look at it, make sure I typed everything right, and then review real quick. Create a camera here, but we didn't set a position. So it's right at smack at the middle. We don't want, well, we will leave it there for now. And then we'll add something here in a moment. So if I typed everything right, I think I should hit F5 here. Nope, no dice. Let's do what I was going to do here and see if that makes a difference. We're going to say our camera position. Now in the previous tutorials, we set x, y, and z separately on each line. You can actually call them all together by saying position set. And I'll say 2, 4, 5 for that. And let's save that. Come here, refresh nothing. Let's hit F12 to bring up Firebug. And here it's saying I typed something wrong. Oh, I've forgotten E there. OK, so line 23, we'll go to line 23. Oops, I hit undo by accident instead of I. But there should be an E here. And let's go back and say 2, 4, 5 there. Save that F5. There we go. So there's our plane F5 to refresh that. And we're just kind of on the plane, sitting there looking out. So I'm going to show you another new thing here, real simple. So we showed you the positioning here, doing it all on one line like that. We can also set what it looks at. Now you can rotate the camera by saying it's rotation of x, y, and z, so forth. But if you want the camera to look at a specific object, you can just point it directly to the position. Or you can give a coordinates or the position which is the coordinate. So I'm going to say camera dot look at. So this is what it's going to look at. And again, you can give a coordinates in here. But we're just going to say scene dot position, which is going to be 0, 0, 0, since the center of our world is the scene. Now make sure if you're going to call it, tell it to look at an object, such as the scene, that you do it after the object is created. So if you were to create the scene down here somewhere, you couldn't have this up here. So now if we save that, run it again, we're looking right down at the center of the grid, or actually the center of our world. And we're looking at it from an angle because we're not directly at the center of it. We can move the camera away a little bit more. Let's say we set this to 20, 40, and 50. And now you can see we can see our full plane. Now that we have that, let's play with some of these numbers a little bit real quick. Let's change size 14 to size 10. Save that, refresh. You can see it shrunk a little bit. And if I go 20 and refresh, you can see it got larger. But you'll notice that each grid, each little block has stayed the same. We're changing the number of blocks. So that's what the size is. Step would be the space in between. So let's change this to two. Save it, refresh it. Now you can see it's the same size, but the blocks are larger. So that's how you can control that. And that's why it's nice to have these variables up here separate. And again, we can say three here if we'd like. Of course, now our grid is uneven because it's getting cut off. Basically, this is not divisible into this. So if this is 30, we'll get a nice even round number like that so we get the grid all the way through. So real quick on the review, creating a scene, creating a camera, positioning the camera and telling it to point directly at the scene. Of course, again, you can point it at any object. So if you create a certain cube, you can say cube dot position. The camera would look directly at that cube. We're going to create a renderer, put it into the body, set it to be the height and width of the screen, set the size and steps of our grid. Then we're going to create a geometry, a basic geometry, and material, which will be a line material, which here is white. Let's go ahead and just for fun, we'll change this to say green. And you can see we now have a green grid. So that's the line material. And then we're looping through basically saying, draw a line from here to here, move, bit, draw a line from here. Actually, we're saying draw a line here to here and a line from here to here and then move. And then we're going to draw a line left and right and up and down or forward and back, actually. So that's what we're doing within our loop here based on the variables we've created up here. Then we're actually going to draw that and add the line and render it just once since nothing will change. Next week, we're going to work on rotating the camera without any extra scripts, just with basic math, in which case we would constantly be needing to re-render. We're going to actually have an animate function again that we'll call the renderer. But we're going to render the scene from that camera view the one time. Again, this script will be up on my site. There'll be a link in the description of the video to it and all the other code from this series. Be sure to check the annotation for the full playlist. If you're watching the full playlist and you get to a video that is marked private, that is because it hasn't been posted publicly yet. I post a new one every week. Just wait till next Friday. There'll be a new video up. Subscribe, that way you won't miss any of my videos. I do have videos on other topics on other days of the weeks, currently Mondays and Wednesdays on other topics, but Fridays currently are HTML5 and specifically right now 3D stuff in HTML5. I want to thank you for watching. I hope that you visit my site. If you like this tutorial and you like this topic, be sure to give this video a like, a thumbs up. I appreciate it and I hope that you have a great day.