Lynda HTML5 For Flash Developers

So when it comes to developing for WebGL, you essentially have two options.

You can program WebGL at the low level, and again, this is similar or it's almost identical

actually to OpenGL programming.

Now myself, and most other Flash developers don't have that low-level knowledge, and the

reality is you don't need to have it because there are high-level frameworks out there

that take all the hard work out of doing WebGL development.

And that's what I'm going to show you how to do in this movie using a library called three.js.

and you may notice, if you've done Flash development for a while,

Mr. Doob was actually a really big Flash guy who actual worked on Papervision and some other

3D frameworks, and he's now moved over to doing HTML development.

And this is just a great library to allow you to easily do 3D stuff with WebGL.

So from this GitHub page, you can either go through and clone or check it out from GitHub

if you want to do all that stuff, or you can just come down the page and get the minified

version of three.js, which is the compressed version.

It's just a single JavaScript file.

So I'm going to click on that and here is what the file looks like.

Now obviously, you're not going to want to really browse through this one, but we're

just essentially going to save this now, so I'm just going to hit Command+S or Ctrl+S,

and I'm going to save this to the Desktop where my HTML document is.

Okay, so I'm going to go over to Sublime Text.

Now obviously, the first thing I have to do in my document here is import the three.js file.

So I'm going to put in a new script tag, put in a source attribute, three.js.

So if you've worked with any of the ActionScript- based 3D frameworks in the past, it's a very similar

workflow as a lot of those other frameworks.

So what I'm going to do here is above my init function, I need to define a bunch of variables.

I'm going to define them as global variables here.

So var, and the first thing I need to create is a camera variable, a scene variable, and

this is going to hold my 3D scene.

A 3D scene needs to have a renderer, so I'm going to define that variable.

Now I'm going to be creating a single cube, and I'm going to hold that in a variable called

cube and we're going to have a material for that cube, so I'm going to create a variable called material.

And lastly, we need to create a mesh object out of both the cube geometry and that material.

So I'll have a variable called mesh here.

So in my init function, again, which happens once my page is loaded, I can go ahead and

start setting up my 3D scene.

So I'm going to say scene = new THREE.Scene,

so the THREE object, all uppercase, is the object that we actually deal with,

and this is actually supposed to be a capital S.

So I'm creating a new 3D scene there.

Now obviously, a 3D scene has to have a camera, so I'm going to define that camera, so camera = new THREE.

Now there's multiple cameras that you can use, but I'm going to use a perspective camera,

so new PerspectiveCamera.

And there are multiple properties that I need to send to this constructor.

So what we can do is go back into the browser and we can look at the online documentation

if you need to know what the actual values are here.

So if we look under Cameras, we have a PerspectiveCamera and it actually tells me the parameters.

So we have field of view, the aspect ratio, the near clipping plane, and the far clipping plane.

So if we go back to our code now, I'm going to put in those values, I'm going to put in 75.

Now for the aspect ratio, we want to take the width of our browser window and divide

it by the height of the browser window, so I can get that by window.innerWidth,

and I'm going to divide that by window.innerHeight.

So now for the other properties, I'm going to put in 1 for the near clipping plane and

then let's do 10,000 for the far clipping plane.

So now we've set up our camera object, now we actually need to position the camera in 3D space.

So I'm going to say camera.position.z = 1000.

Now we have created the camera, now we actually need to add this camera to our 3D scene.

To do that, we say scene.add(camera).

So we now have our scene set up, we now have our camera.

Now we actually need to work on having an object in the scene that we can see.

So we're going to use that cube variable.

I'm going to say cube = new THREE.CubeGeometry.

Now if you look in the documentation, you'll see that it's a whole host of different geometries available.

You can make, let's say, a plane, you can make a torus, you can make all types of different

things that you can do there.

So for CubeGeometry, I need to pass in three values.