rotation

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!

1-2-three
example 5: rotation

<!DOCTYPE html>
<html>
<head>
<title>example 5: rotation</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript">

function fixMatrix(mesh) {
  bakeRotation(mesh);
  rotate180(mesh);
  bakeRotation(mesh);
}

function rotate180(mesh) {
  var m = new THREE.Matrix4();
  m.makeRotationY(Math.PI);
  mesh.matrix.multiplyMatrices(mesh.matrix,m);
  mesh.matrix.decompose( mesh.position, mesh.quaternion, mesh.scale );
}

function bakeRotation(mesh) {
  mesh.updateMatrixWorld();
  var geom = mesh.geometry;
  var rotMatrix = mesh.matrix.clone();
  rotMatrix.setPosition( new THREE.Vector3(0,0,0) );
  var pos = new THREE.Vector3();
  pos.setFromMatrixPosition(mesh.matrix);
  geom.applyMatrix(rotMatrix);
  mesh.matrix.identity();
  mesh.matrix.setPosition(pos);
  mesh.matrix.decompose( mesh.position, mesh.quaternion, mesh.scale );
  mesh.updateMatrixWorld();
}

var init = function() {
  var canv = document.getElementsByTagName("canvas")[0];
  var w = canv.clientWidth;
  var h = canv.clientHeight;

renderer = new THREE.WebGLRenderer({canvas:canv});
  renderer.setSize( w, h );
  renderer.setClearColor(new THREE.Color(0xeeeeee), 1);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
      15,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );
  camera.position.set( 0, 3, 25 );
  scene.add(camera);

var light = new THREE.PointLight( 0xFFFFDD );
  light.position.set( -15, 10, 15 );
  scene.add( light );
  
  var ambient = new THREE.AmbientLight( 0x777777 );
  scene.add( ambient );
  
  var loader = new THREE.ObjectLoader(  );
  var mesh;
  var onScene = function(scn) {
    mesh = scn.getObjectByName("Bug");
    mesh.material.shininess = 5;
    fixMatrix(mesh);
    scene.add(mesh);
  };
  loader.load( "models/vwbug/vwbug-scene.json", onScene );

var rotationSpeed = 1.0;
  
  var clock = new THREE.Clock();

var animate = function() {
    var dt = clock.getDelta();
    if (mesh) {
      var dYaw = dt*rotationSpeed;
      mesh.rotation.y += dYaw;
    }
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
  };
  
  requestAnimationFrame(animate);
};
  
window.onload = init;
window.onresize = init;
</script>
</head>
<body><canvas style="width:100%;height:95%;border:1px gray solid;"></body>
</html>