Hobby 3D Game Programming with Three.js

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...

.... Continued from part 1 06 var geometry = new THREE.CubeGeometry(1,1,1); 06 To see anything in our newly created scene, we have to create some game objects.    Again, we use the 'var' keyword and pick a name for our object, in this case it is called 'geometry'.  We then fill it with '= new' and a call to THREE.CubeGeometry(1,1,1).   Have you noticed a pattern yet?  The pattern is:  var name = new THREE.something();  -  (where 'name' is the name you pick, and '.something' is the name of the helper function you are calling from the Three.js graphics library. Get used to this pattern because you will see a LOT of instances of it throughout our code, especially the THREE.something part.  Moving on, '.CubeGeometry()' is a function of the Three.js library that creates a cube or box shape.  The 3 parameters inside the parentheses() give the dimensions of the cube in order: (width, height,depth).  So to create a box or cube with 1 un...