Animating the Cube In 3D

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 parameters inside these parentheses during the function's design phase, but we don't need any parameters right now so we'll leave it empty.  Next comes an open curly brace { which signals the start of the actual function code.  On the next line we put our code, which could be 1 line or many lines - it doesn't matter.  When the code is done, on the next line we use a closing curly brace } which signals the end of this function.

Here is the finished animate() function:

function animate(){
   
   requestAnimationFrame(animate);

   cube.rotation.x = cube.rotation.x + 0.02;
   cube.rotation.y = cube.rotation.y + 0.03;
  
   renderer.render( scene, camera );

}

There are some new commands inside this animate() function.  I will explain each line soon.  For now let's just update our .js file so that we can see the animation.  

By the way, our new animate() function will not do anything like it is.  We have to actually call it or execute it.  In JavaScript, we do this by writing the name of the function, its parentheses, and a semicolon at the end.  Here's how that looks:

animate();

This statement executes whatever is inside the design of our animate function.  Looking back at the entire animate() function above, you may recognize the very last line of code starting with the word renderer. I cut that line from our old tempGame.js file and pasted it inside the animate() function.  Since it is here now, we can safely remove the line where it came from.  Here is the full tempGame.js after it has been correctly updated:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({ color: 'rgb(0,255,0)' });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;
animate();

function animate(){
   
   requestAnimationFrame(animate);

   cube.rotation.x = cube.rotation.x + 0.02;
   cube.rotation.y = cube.rotation.y + 0.03;
  
   renderer.render( scene, camera );

}

Notice I called animate(); before the design phase of ' function animate(){...}' is even listed in the program.  Not to worry - when the JavaScript interpreter is running through this code it will read  'animate();' first and then go and find the design of that animate function wherever it is in the program.  Once it has located the design, it will execute everything inside the curly braces {} of that particular function (that's why we need curly braces for all blocks of code or functions).  

Copy and paste the above code and save it as tempGame.js, overwriting the old one.  Now go back and open up your example01.html webpage file with the Chrome browser.  If you've saved everything correctly, you should see our old green square now transformed into a spinning cube in all its 3D glory!

In the next post we will look at what the animate() function is doing, line by line.