I'm using brackets as my editor. And you can use whatever text editor you want. And brackets is a good one and it's freely available. If you look at the folder, you just download, you'll find this V zero folder. And in there, there's just two files. And let's have a look at the index dot HTML file first.

This is this is all that we've got in it. We are defining some CSS. So the body's got zero margins. And if we create a canvas, it's going to be the full width and the full height of whatever is set into which in our instance is going to be the body. We've given it a title, my first three.js app. And we download downloading to script files.

The main three GS library minimized which you'll find two folders up in the libs folder. And the file game dot j s, which we're just about to create. I'm using ESX. So I'm so game is going to be a class. And we're going to create a single, a single instance of that class. But we're going to wait until all dumb contents loaded before we do that.

And just for debugging purposes, we're going to make windows game equal game so we can get at it in the console, in our browser. So that's all you need in the HTML file. So let's have a look at the game file itself. If you're unfamiliar with s six classes, they must have a constructor. And the constructor is called Whenever you call new on a new instance of this class. In this we're going to create a scene.

So we use new three. Everything we deal with 3ds has three in caps, three dot scene, so a new three dot scene. We've got a great create a camera, it's going to be a perspective camera. The angle of the camera is going to be 75 degrees. That would alter the width, you can see the width of the viewing width. We're going to give it an aspect ratio, the aspect ratio we've done All is based on our window in the width of the window divided by the height to give us the aspect ratio.

And then we've got a near value. So the nearest that we're going to be able to render something is point one from the camera, and the furthest away is going to be 1000. That's the range. We created a render. And the render we're going to create is a Web GL renderer. And we're setting the size of our renderer to be the size of our window.

And then the render, in turn, creates a canvas. And the canvas is this DOM element. So we need to append that to our document, otherwise we won't see it and then we create a bit of geometry. So the geometry is going to be a box. Like the cube we saw in the earlier lecture. We're going to create a light, which is a directional light.

With color white. ff ff ff is, FF er red, green and blue. You know that familiar with that. We're going to set a position for the light, this zero in the x axis 20 in the y axis, and 10 in the Zed axis. So that's 20 going up, and that's 10 coming out to the screen. And then we're going to set an ambient light which doesn't have a direction at all.

And that will just and that will just be this gray color. And then we're going to create a material So found material so that's going to use lighting. And the color of it is quite a bright blue. And then we create a cube. That's a mesh. A mesh has got geometry has defined by the box geometry.

So it's one wide, one high and one deep. And it has a material as defined by this funk material that we've created here. So it's blue. Because we created this scene, we can now add this to our scene. So the cubes added to the scene. The light we create is added to the scene, and the ambient light we created.

They're all added to the scene. And then we define the position of the camera has to be three away from the center of the screen. The queue by default He's going to pivot around 000. And then we start our animation. Because we're in a class, this calls the animate method of the class. We want to be calling this continuously, so that it updates in a regular on a regular basis, up to 60 times a second.

And so we use requestAnimationFrame. And we pass in a little function here, where it's going to call the game animate function yet again. In the animate function, we rotate the cube in the x axis and the y axis by a small amount. Then we render using our renderer The same using our camera. Now you need to use the web server for Chrome that you installed earlier. Go to Chrome, search for extensions, you'll get this panel come up.

And if you click that, hopefully you've pointed that at the resource you've just downloaded. And if you have then you should have libs and the Lost Treasure folder. For now we'll go to this one. And there you have the rotating cube. I open the console, then I can turn that into wireframe. Oh, fancy back into solid.

The reason we define that is that allows us to get access to game outside This function allows us to use the console to manipulate properties of things in our scene.