2.2 Lights, Camera, Render

Okay, let's open our main js file and remove the console log message. The first thing we need to do is something we always need to do and that's to create a scene. All we need to do to do this is write var scene = new three.scene. Three is a global variable that gives us access to all the methods in the three library. Next we want to add some light to our scene. If we take a look at three's documentation you can see there are a few different types of light. Ambient light for example is useful when you don't care about shadows or anything. It shines an equal amount of light on everything, so everything in your scene is visible. I want to enhance the 3D effect to show off three to you. So let's add a point light. A point light is one that generates light in all directions from a specific point, just like a light bulb, so let's create one. Light = new three.PointLight. This takes two arguments, the first is the color of our light bulb. Let's play safe with white, so we write, 0XFFFFFF. This is the hexadecimal code for white. If you're used to dealing with colors in CSS you'll find this 0X prefix a bit weird. I believe it's a hangover from the C programming language, but note how it's not a string. We don't put it in quotes or anything. The second argument is how intense or bright our light bulb is. Imagine the bulb is controlled by a dimmer switch which went from zero to one, zero being off and one being the brightest. You can put in any number, including decimal places between these two values. We want our scene to be Apple Store bright, so let's set it to one. Next we have to add it to our scene which is nice and straight forward, scene.add light. Right, let's go to the browser and see our page in action. Nothing, but what do you expect? We don't have a camera, let's add one. We do this by saying camera = new THREE.Perspective.camera. A perspective camera is just your normal run of the mill camera with normal perspective. That is things get smaller in the distance, angles are normal, etc. The perspective camera constructor takes four values. The first is the field of view. Let's take a look at this diagram in Wikipedia. The field of view is the vertical angle from which the camera sees. The smaller it is, the more limited the vertical viewport. A way to imagine this is to close your eyes as much as you can while still being able to see. This is a small field of view angle. Then open your eyes as wide as you can. This is a larger but still not huge field of view. Let's keep our camera's field of view quite narrow, with 35 degrees. The next parameter is the aspect ratio of our camera. Is it a square, four by three, wide screen? Well we're not in TV land, so it can be whatever we want. Let's make it the same shape as our browser window. To get our window aspect ratio, we just divide window.innerwidth by widnow.innerheight Easy, third and fourth parameters are the distance from the camera in which we want to see things. For example, if something is too far away from the camera, we may decide that it's not worth rendering it. Similarly, if we're too close to something, we may want it hidden as otherwise it would be blocking our view. So the first of these two values is the near plane. We want everything close to us to render, so make this a small as we can without being silly, let's put one. The next values is so far away from the camera do we want to start hiding things, how about 1000. Where did I get that from, did I just pluck out of thin air? What even are these units, 1000 what? So yeah, I did just pluck them out of thin air. And also these aren't 100 anything in the real world, it's just an arbitrary scale. The important thing is the relationship to each other. 1 times 1000 is still 1000, everything is still relative to each other. Okay, we've now got a camera, but where should it go? Remember that the very center of our scene is zero, zero, zero. And that's where most of the action is going to happen. So let's set up our camera to capture all of that. We want the position of our camera closer to the screen pointing inward. So if we look at a diagram again, zed axis goes from zero in the middle and goes up and up as we get closer to the screen, which is what we want. Let's set the camera up to be ten units closer to the scene than the center. To do that we write camera.position.z = 10. Okay we've gout our camera positioned, but we're forgotten to position our light. Just like our camera, our light has to be put in the correct position. Let's have it shining from behind the camera. Light.position.set 0, 0, 50. So that's in the middle of the x and y axis, but 50 units toward the screen. That is 40 units behind the camera. All we have to do now, is render the scene. This is the actual drawing of everything on to the screen. In our case to the HTML5 canvas element. We need to create a render which tells three that we wanted to use Web GL. Render = new THREE.WebGLRender. This also creates a canvas that our masterpiece will appear on. Let's go back and make it the size of our browser window. Again by using inner width and height, render.setSize window.innerWidth, window.innerHeight. The last thing we need to do is add the canvas created by the renderer to our page. Luckily, we created an empty dev earlier for this very reason. We can just append the canvas to this element by doing document.querySelector then the ID of our element appendChild Render.domElement. Great. Okay, now let's see what's happening in our browser. Refresh and nothing, again there's nothing to see. We've added a light and a camera, but we don't have any props or actors. Let's change that in the next lesson