Hobby 3D Game Programming with Three.js

Now it's time for one of the most important elements in 3D games and graphics:  lights and lighting.   The Three.js library offers us some of the latest and most realistic lighting and shading options available in today's web browsers.   There are a lot of options for types of lights, types of surface materials on the subjects that are lit,  and equations/algorithms that affect the final look of the lighted scene.  This will be a multi-part post because we have to cover quite a bit of setup for lighting to work well in Three.js.   First, we have to change the material (or skin) of our colored cube so that it will correctly respond to lights in the game world.  If you recall, here is the old way of setting up the material/skin of our green-colored cube: var material = new THREE.MeshBasicMaterial({ color: 'rgb(0,255,0)' }); Unfortunately, this way of setting up a 'Basic' material will only shade the cube with the rgb color that you manually give to it...

After all the movement coding that we just did, how about we take a step back and do something a little different - color using Three.js.  Remember the rgb (red, green, and blue) line of code that made the cube a bright green?  Just in case, here it is again:  var material = new THREE.MeshBasicMaterial({ color: 'rgb(0,255,0)' }); The three numbers inside the rgb code parentheses, (0,255,0) represent the intensity of each component of the overall final color.  We have 0 for red, 255 for green,and 0 for blue.  Remember that 255 is the maximum value for a color code.  Since we have 0 for both red and blue, they will not be mixed into the final color.  And since we have the maximum 255 for green, our cube turns out to be the brightest green possible.  Let's have a little fun with the color values.  First, try replacing the number 255 with a lower number, like 50.   Since this is a lower intensity, it will still be green, but...

At this point, we have the code ready to flip the camera movement back and forth.  But we don't have any code to regularly 'time' this flipping at set intervals.  This is where we need another if(condition)-type statement to check whether or not it is time to flip the camera going the opposite direction.  There are 2 ways of doing this.  We could make an artificial clock timer and at set times, flip the switch.  We might see this timer element later in our games, but for now I want to try the other easier option.  All we will do is set a distance limit that our camera can travel. Once it reaches this limit, we stop the camera, flip the switch, and send it in the opposite direction.  Here's the new 'if' statement that we will add: if(camera.position.z > 10){ camera.position.z = 10; forwardFlag = true; } Remember that when our program starts, the forwardFlag is set to 'false' and therefore the camera is constantly moving backwards wi...

Let's have a little fun with the camera movement, and at the same time learn a new technique called oscillation.   The general idea is that we would like to move the camera backwards, then forwards, then backwards, then forwards, and so on.  Anything that goes back and forth like this is said to be in an 'oscillation'.  That's just a fancy name for moving back and forth.   Remember that we used the '+' sign to increase the distance between us and the green cube and the '-' sign to shrink the distance.  So what we need is a way of changing periodically between these positive and negative movements, and then we will have an oscillating camera.  If you are new to game programming, you might think, "Ok, let's just put both lines of code back-to-back, like so": camera.position.z = camera.position.z + 0.1; camera.position.z = camera.position.z - 0.1; But you would quickly realize that this adds and subtracts too fast, actually resetting the cam...

In addition to animating the game objects such as our green cube, we can also move and rotate the camera (or eye position) in the game world.  We'll get into camera rotation in a future blog post, because that is slightly more involved.  For now we will focus on camera position movement, which is a little easier to grasp right away. Remember when we picked up the camera and moved it back along the positive z-axis (going behind you) so that we could step back and see more of our scene?  In case you need a refresher, that line of code looks like: camera.position.z = 5; We typed the name of our camera, 'camera' and then used the dot (.) and then the 'position' property, followed by another dot (.) and finally the axis that we wanted, which is 'z' in this case.  Then we filled this property using the = sign followed by the number value that we would like to assign to it, which was '5'.  What will happen if this number value changes every animatio...

Let's take a look at what is going on inside the new animate() function.  Here is the function printed again for reference: function animate(){ requestAnimationFrame(animate); cube.rotation.x = cube.rotation.x + 0.02; cube.rotation.y = cube.rotation.y + 0.03; renderer.render( scene, camera ); } The first line inside the animate() function is a call to requestAnimationFrame().  This comes from the RAF (Request Animation Frame) API that has been developed mainly by Mozilla and the WebKit team (Google and Safari) for use in high performance apps for the web, such as games that we want to make!  The requestAnimationFrame() function will try to update the rendering (drawing) of your game at a smooth 60 frames per second.  As of this writing in 2013, this is the best way to quickly update your game's logic and graphics inside a browser.   Notice that the requestAnimationFrame() function takes a parameter inside its parentheses, whic...

It's finally time for some 3D!  We are going to add 5 lines of code to our tempGame.js file that will make our green cube come to life with spinning and movement, right in your browser. First we must create our own custom function (or block of code) that will animate the cube.  In JavaScript we create a function by using the 'function' keyword and giving our function a name.  The name should make sense to you and others who may read your code, and it should be descriptive of what it does.  Since we want to have an animation-type function, we will name our function 'animate'.  There are different ways to declare and use functions in JavaScript, but for now we will use this format: function animate(){ //our code goes here } I first used the 'function' keyword followed by the name we give to our function, in this case 'animate'.  Open and closed parentheses () follow the name.  If you choose, you can put a comma-separated list of parameter...