Loading up pretty models and flying around them with the camera is fun, but most simulations require the models to actually do something. That is, we need to animate them. This example does one of the simplest possible animations: simply rotating a model in place.

To animate a model, we need to adjust whatever parameters are changing before we render each frame. Since we want our animation to be smooth, it needs to depend upon how much time has elapsed since the last frame. The getDelta() method of Three's clock is exactly what we need.

var dt = clock.getDelta();
if (mesh) {
  var dYaw = dt*rotationSpeed;
  mesh.rotation.y += dYaw;

First the elapsed time (dt) since the last frame is determined. Then we check whether or not the mesh has been defined. Since the mesh takes time to load, this test may be failed for the first frames of the simulation. If the mesh is there, then the corresponding change in the yaw angle (dYaw) of the model is determined by multiplying the rotation speed by the elapsed time. Finally, the model (i.e. the mesh) has its orientation about the world y axis (up) incremented by dYaw.

Note that rotation is around the world y axis. If we tilt the model (and its y axis) over, and continue to animate as above, it will still be rotating around the world y, not the new, tilted model y!

example 5: rotation