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, which is the name of your animation function. Since we named ours 'animate', we type 'animate' inside the parentheses. This creates a loop as the requestAnimationFrame(animate) keeps calling the function that it is already located in, which is animate().
Before it heads back to animate() though, it will quickly run through what is right below it. And what it will see is our game object updates, such as the cube rotation. In future blog posts we will look at ways of updating the game objects and game logic in more detail. But for now, let's consider how to spin our green cube:
cube.rotation.x = cube.rotation.x + 0.02; cube.rotation.y = cube.rotation.y + 0.03;When we created the 'cube' mesh earlier in the program, it inherits the Three.js library's properties and helper functions for all mesh objects. And one of these properties is called rotation. Since we are working in 3D, we can rotate an object in 3 dimensions, which are the x-axis, the y-axis, and the z-axis. Again, in future posts I will go into way more detail about 3d movement and rotation, but just understand for now that we are wanting to update the rotation along the x axis and the y axis. Therefore we type:
'cube.rotation.x' to change the amount of x-axis rotation. If you are new to game programming, you might wonder why we have written it twice in the same line. We do this because we want it to always remember where it was last time it was updated. If we just wrote cube.rotation.x = 0.02; and that's it, then the cube would rotate 0.02 units and stay there and not move on the next pass through this function. That's because it keeps getting set to 0.02, 0.02, 0.02, etc., every time it sees this line of code. Instead, we first set the rotation to its old self, which looks like 'cube.rotation.x = cube.rotation.x'. Now it 'remembers' where it was the last time. Then we add the '+ 0.02;' part which keeps adding 0.02 to itself, growing larger on every pass. Now we correctly see the following values for cube.rotation.x as it loops: 0.00 (initial value is 0), 0.02, 0.04, 0.06. 0.08, etc... It will now spin smoothly along the x-axis. The next line of code does the same, but with the y-axis.
By the way, the numbers 0.02 and 0.03 that are added every loop are arbitrary numbers that I chose because they worked well for this particular demonstration. Basically the bigger the number, the faster our green cube will spin. These number values can be anything really, and in future posts we will take a look at how changing numbers like these directly effects the motion of our game objects.
Finally on the last line of the animate function, we have a line of code that should look familiar:
renderer.render( scene, camera );
This is a direct copy of the renderer line in our old tempGame.js file. I stuck it inside this function because remember: anything that is inside the animate() function will get updated 60 times a second. And since we want our game to draw, update, and run at 60 FPS, we put the 'renderer.render( scene, camera);' line right here so it draws the pixels of our game to the browser window as fast as possible.
Next up... We will learn how to animate our camera (which is like our eyes) back and forth and make the cube look like it is popping out of the browser! Till next time...
