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.
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:
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:
Finally, update the background color to whatever you like by setting the renderer clear color.
Any questions? Let me know below or tweet me! @jennyveens