Learn Three.js - Third Edition

Simple animations

With this approach, we can very easily animate objects by changing their rotation, scale, position, material, vertices, faces, and anything else you can imagine. In the next render loop, Three.js will render the changed properties. A very simple example, based on the one we already saw in Chapter 1, Creating Your First 3D Scene with Three.js, is available in 01-basic-animation.html. The following screenshot shows this example:

60 FPS (35-60)

The render loop for this is very simple. Just change the properties of the involved meshes, and Three.js handles the rest. Here's how we do this:

function render() { cube.rotation.x += ...