This is Part 2 in getting up and running with three.js. In the last post we created a simple scene with just a white sphere on a black background. In this post we’re going to add a simple animation to our sphere. We’ll also change it’s appearance so we can better see the animation.

Visit Part 1 if you want to see what we’ll be creating or to start from the beginning. If you’d like to pick up where we left off just download the finished Part 1 files below.

Our starting point - the finished result of Part 1

In this example we’re working with a Basic three.js material. Basic material does not reflect light - that’s why our white sphere just looks like a flat circle. We can still change the color of our material by passing it a color, and give it some depth by setting wireframe to true. These values can either be passed when the material is created, or by calling setValue() on the material and passing it an object:

	material.setValues({
		color: 0xDDA0DD, 
		wireframe: true, 
		wireframeLinewidth: 2
	});
Basic Material with updated color and wireframe values.

To animate the mesh, we’ll use requestAnimationFrame to rotate our mesh on it’s x and y axis. This function will call itself so it plays continuously. At the end of the function we will re-render the scene with the updated values:

animate = function() {

	requestAnimationFrame( animate );

	mesh.rotation.x = Date.now() * 0.0002;
	mesh.rotation.y = Date.now() * 0.001;

	renderer.render( scene, camera );

}
Spin, my little sphere. SPIN!

Finally, update the background color to whatever you like by setting the renderer clear color.

renderer.setClearColor( 0x7FFFD4 );
Finished - Our colorful little scene.

Any questions? Let me know below or tweet me! @jennyveens