 Okay. We've been working with HTML5 Canvas at the last couple of months here on Fridays, and I promised you in the new year, January 2014, we are going to start working with 3D stuff. And we're mainly going to be using 3JS, which is a JavaScript library created to make it easier for you to create 3D stuff. If you go to 3js, that's T-H-E-R-E-E-J-S dot org, there's a few more professional examples that they have here. Very cool stuff if your system can run it, and we'll talk more about that in just a moment. But not only do they have these examples, but they also have great documentation, and they also have the download package where you can download all the library files, examples with models, and a whole bunch of stuff from very basic stuff up to more advanced stuff, and we're going to go through a lot of that in this series. Again, a new video every Friday here on my YouTube channel. So, go ahead, my recommendation is first thing, go here, go to 3js.org, and start looking at all these. Some of these things may or may not run well on your computer. Some of these work great on both mobile and desktop. Example here, I think this is one of the greatest that runs so smooth, even on my phone, is this little ping pong type game here. But look at other of these, see what is possible using HTML5 and 3JS. Now, when working with HTML, we have HTML5 and we're working with 3D stuff. You have different options. You can use Canvas alone, you can use CSS to do 3D stuff, and you can use WebGL. Now, I don't know all the technical differences, but I will tell you what I have read and a little bit of what I experimented with is something like the CSS is probably the most compatible, but the simplest, it can't really do advanced stuff from what I've read. I haven't really messed with it too much. Mainly, I've worked either with the WebGL or the Canvas, and we're going to be playing with both. So, if I tag a video saying Canvas, it may or may not actually be using the Canvas, and I'll try to explain each video when we're using what. But basically, WebGL is going to be the most advanced. It's going to allow hardware acceleration if your hardware is not blacklisted, if it's allowed, and we'll talk about that more in future videos. It's going to give you the best performance if your browser supports it. And as I said, CSS is the most compatible. Somewhere in the world is just using Canvas, I guess. Using the Canvas, I can actually run some of these scripts on my phone. I'm running an older version of Android with Firefox, and the Canvas stuff runs, but not great. A few frames a second, even for simple stuff. But of course, as this is still an early development, as we move on, you'll see better and better performance. There are more hardware added to the list of accepted cards for the WebGL. With your browsers, you can always override and even use blacklisted stuff. If you have a blacklisted driver graphics card, you can still get around it and get it to work, but it may not run great. So anyway, there's a lot to think about, and we'll get into that. Play around with these examples. But now that I've talked forever, let's jump into the tutorial here. So here I am. I am in a folder. I will list out. I've got two files. I've got plain.html and a very minimal 3.min.js. It's the minimal JavaScript 3.js file you need to run stuff. When you're working on bigger projects, you're going to want to download the whole package, go through it and pull out what you need. But I've already extracted this one file for these basic tutorials, and we'll link to them. That way we don't get confused with other files from the package in these tutorials. Now, the plain.html is this right here. We'll go back to this if I vim into plain.html. You can see it's very simple. We have the HTML tags, the body tags, and we're loading up the script, which is in the same folder, so I just need to give it its name here in the script tags. Now we're going to start creating our own little script here. So let's go script. We'll open and close those tags so we don't forget to close them later on. We need to create a renderer. Let's create renderer object var renderer equals new. We're creating a new, and this is something from the 3.js file that we've already imported. We're going to say 3.webgl renderer. It's very important to spell things properly. Also remember, things are case sensitive. 3 here has to be capitalized, w and web has to be capitalized, gl and the r here all have to be capitalized. So we've created an object, a renderer object. Now let's say renderer. So taking that object we just created and let's set its size. Again, capital S there. We're going to make something full screen. It's not going to be part of the web page. It's going to be the whole page. So we'll say window.inner with and then comma window, lower case, window.inner height, capital H there. So we're just saying our renderer is going to be the full window, your full browser window, the width and the height. You could put in your own numbers in there, but we want it full screen. Now we're going to say document.body.appendchild and we're going to take this renderer and just append it to our body of our page. So renderer, the object we've created, DOM element. So, and don't forget our semi-colon there. So we've added our renderer to our page. Next thing we want to create is a camera object because you can make a 3D scene object and all this stuff, but without a camera you can't see anything. Whenever you're creating a 3D world, you need a camera. That's what you're viewing. So var, we'll call it camera. And just remember that this renderer here and this camera here, their variables we're creating, we can call them within reason, whatever we want, but it makes sense to call camera, camera. Or we can call it cam if you want to shorten it up some. And we're going to say create a new object from the 3JS package. We're going to say perspective, perspective, camera. Once again, capital P, capital C. And then here we're going to give it some parameters. We're going to say 45, we're going to say window.innerwith-window.innerheight,1,1,000. Now what does all that mean? Well, let's have a quick look at the documentation from the 3JS website on camera perspective camera. So it gives you an example, pretty much what we just did here. And we'll be adding the camera here in a moment. So the first number, this 45, is the FOV. Is the camera, frustum, I'm assuming how you say that, vertical field of view. So just think vertical field of view. The camera aspect ratio, the near plane and far plane of the camera's frustrum. So you might be going, what's a frustrum? Well, it's a geometry term, if you go to Wikipedia here. In geometry, a frustrum is the portion of a solid, normally a cone or pyramid, that lies between two parallel planes cutting it. Okay, I hope that helped you some. I think it's not too important in this tutorial, considering I don't even really understand it, but I think it's just the depth that can view. So this one means basically as close to the camera, and the thousand is as far away from the camera you can get. So basically, if something is further away than a thousand, whatever measurements we're using, it will be out of view. You won't be able to see it, I'm assuming it won't be rendered, which hopefully will help performance some. So that's my guess. But just going through tutorials, one to a thousand is good for this tutorial. Now we need to set the position of the camera and its rotation. So we're going to say our camera object, then we're going to set its position, and we're going to say its Y position. We're going to set that equal to negative 450, and then we're going to set our camera's position. Z equal to 400, and we are going to set the rotation of the camera. Rotation dot X, so the X rotation, equal to, in this case, I'm just going to say 0.75. Now let me explain some of this. So you have your Y position, and everything starts at the center of our scene, which we'll be creating here in a moment. So we're going negative 450 from there, and then Z we're going 400. So basically, Z is up and down, Y is near and far, and X is left and right. So here we're raising the camera up 400 units, and then we're pulling it back from the center, negative 450, because we're going to put a plane right smack in the middle of our scene. So we need to back up so we can see it so we're not right on it. We're going to lift up, and then we're going to point down about 45 degrees. When we get into future tutorials, we'll get more into when you're working with rotations, you're going to be working a little bit with pie. It's simple to get 45 degrees. You basically take pie, divide it by 180, because you have 180, you know, and then you multiply it by 45 to get 45 degrees. It's going to come to about 0.7 something. So I'm just putting 0.7 here now. We'll get more into rotation stuff later on, especially when we get into animations. So we've created our camera and we've positioned our camera. Now let's create our scene. So we're going to create another object, scene. It will be a new three dot scene. So we're saying, once again, we're creating an object. We're going to say it's new. Look at the 3JS script, and we're going to create a scene based on that. That's all we have to do for scene. Now let's create our plane. This is going to be our object that we're going to look at. So var, we'll call it plane. Of course, again, you can name it something else if you'd like. New, again, from our 3JS file, let's create a mesh. And there are different meshes you can create. And we'll get into that in future tutorials. I'm going to say new three. And luckily, 3JS has already has basic objects created for you. So we're going to create a plane geometry. Again, remember the case. Got to have a capital P and a capital G there. And now a plane has width and length. Let's just create a square plane. We'll say 300 units by 300 units. And then we'll say, next we'll give it a material, which you can create outside of this and apply it. But we're just going to create a new plane right here in the same function. And we're just going to say mesh normal material. So basically we're calling a function and putting its output into this function. And we'll get more into that. We're not going to put any parameters for that material. There are different types of material. We're saying a normal material for the mesh and all the defaults, which will be like a light blue color. And again, we'll get more into materials and textures down the line. Now we've created our plane, but we need to add it to our scene. Until you add it, it exists, but like in another realm in another dimension. It isn't there yet. We're going to say scene.add. And we're going to add plane. Now if you've done any type of game programming, like if you watch my old Pi game tutorials, you create something and then you have to add it or draw it in Pi game. Next we added our plane. We're almost done. One more line of code and hopefully I've typed everything right. We're going to take our renderer, which we created. It was the first thing we created. And we're going to say render. What are we going to render? We're going to render scene. You can have more than one scene. And how are we going to render it? We're going to render it from the view of camera. You can have more than one camera too. But we have one scene, one camera. So I'm just saying render this scene using this camera as a rendering point. Let's save that. Let's go to our thing here, our web browser. I'm going to hit F5 to refresh. There is our plane with a default texture. Now if you... Lots of times when you're creating objects, such as we do with the camera here or creating our mesh here, you can leave a lot of stuff blank and it has defaults. If you read through the documentation on the 3JS website, you'll see defaults. For example, if I was to remove this material, it defaults to a wireframe. So that's what it will look like with a wireframe. And again, there are other types of materials that we'll get to in future tutorials. But quickly, let's have a look here. Play around with this a little bit. Let's put that material back. So we're back at a blue material. Let's play around with these positions some. So as I said, negative Y. We're starting at our center point, which would be right in the center of this plane because we didn't give the plane any position. So by default, it goes right to the center of our scene. We're going to move our camera on a Y axis. So that would be away from us or towards us. So we did a negative 450 units, right? So that's why our camera is back. If we didn't do that, the camera would be right here and be right inside the plane. So here's an example. If I say negative 350 here, it will move us closer. So now we're almost over the plane. If I was to say, 550. Let's not do that far. We'd be way out of range for that. You can see now we're further away. Let's go back to our 450. And of course, if I was to do Z, if I want to go below the plane, I could do a negative 400. But since our camera is pointing down, we wouldn't see that. So let me just show you if I go 600. We'd be up higher. So we're higher above the plane. And we've got our rotation here. So let's see. Save that. Save this. Oh, not quit. Save it. So back to our default here, our default that we've created. We are going to, let's say, we're working with decimals here. So even a little bit of a change makes a big difference. So to 0.75, we're going to 0.55. And you can see the camera is pointing much more down now. By default, I think 0 is pointing straight down. So if I was to put this to 0, I'm pointing straight down. So I don't see the plane anymore. But if I was to set Y to 0, I'll be right above the plane, 400 units up. So I did that. And now we're looking down. It looks just like a square, because we're looking directly at it. So just wanted to play around with that a little bit to show you the different, how you align the camera. Because of course, aligning the camera is extremely important. What did I do here? Oh, that should be a negative 400 to get us back to about where we were before. We were at 75 when it came to... I need to slow down with my... Oh, I hit caps lock. That's why that's happening. Okay. So we're back to there. So I hope that... let me go over everything right now. I know the tutorial is dragging on a little long. But we've imported our 3JS, our minimalistic 3JS for doing basic stuff. We created a renderer based on our 3JS script up here using WebGL as the renderer. We are going to render a set size. We're saying the window width and the window height, so whatever the browser is now. You'll notice if I resize this window here, it didn't resize. It remembered the initial loading size of the screen. Later on, we'll get into where you can actually make it so if they resize the window, it will shrink down your scene to fit. So that's our renderer. This is the size of our renderer. Then we're using our document, which is our web page, and we're appending to the body. So we're adding to the body a renderer that we just created. Now then we create a camera because we need something to view with. And that's a new camera from our 3JS. Again, later on you can add multiple cameras if you'd like. And then the aspect ratio of that, how far and how close it can see stuff. We have our positioning, which we've played around with a bit. We have to create our scene. It's a new scene from 3JS. We create a plane. Give it a size here. Again, you can change the size. We can also rotate it, which we'll get into later on. And we then added a very basic normal material. And we've also added it to our scene. So we have our scene that we created up here. We'll do that scene. We're adding the plane that we created here. Then we're going to say, render this scene using this camera. So very, very simple. Once you know what to type. And definitely, once again, 3JS has a lot of geometry, or spheres, cubes, planes, or I set it for you. Way down the line, we'll get into creating models and scenes in Blender and exporting them in different formats that can be imported into 3JS for use. So you can do your modeling in Blender if you're going to do more advanced models, and then bring them in here. And 3JS allows importing of a lot of different modeling formats that are very common. So that's further down the line, though. Very basic stuff here. Might seem like a lot just to create a plane, but it's also very simple, and you're actually writing the code out and not just using Blender. And it will run. You can open this up on mobile devices, basically anything with a modern browser. So anyway, thank you for watching. I hope you enjoyed this tutorial. I know this first one was kind of long, but we will get into more advanced stuff as we go along. I want to start off simple and I want to make sure I explain everything thoroughly. So I thank you for watching, and I hope that you have a great day.