look towards

Instead of sliding to the selected waypoint, the model will now turn towards them. Rather than snapping to the waypoint, we will turn towards it at a speed controllable by the application. This method is useful as a simple way to make models behave as if they have rotational inertia. The 1, 2, and 3 keys command the model to turn towards the red, green, and blue cubes.

First, the amount the model can turn since the last frame is computed base on the elapsed time and rotational speed of the model. Then this angle, the mesh, and the target to turn towards are passed to the lookTowards helper function.

var dTheta = dt*this.rotSpeed;
lookTowards(this.mesh,this.goalPos,dTheta);

This code uses quaternions instead of rotation matrices to represent the orientation of models. Quaternions are a concise way to describe rotation with a vector of four numbers, often written (x,y,z,w). A rotation of angle A around an axis specified by unit vector (x1,y1,z1) corresponds to the quaternion (x1*sin(A/2), y1*sin(A/2), z1*sin(A/2), cos(A/2)). Pretty straightforward. Even better, it often works very well to animate an object from one orientation to another simply by linearly interpolating between the corresponding quaternions, a process known as "slerp". The lookTowards function uses the native quaternion slerp function to perform the rotation. It performs the rotation while preserving the up direction of the model.

that.mesh.useQuaternion = true;

sets the object to use quaternions to represent its orientation. Note that if an object is not using quaternions, helper functions like quat.setFromRotationMatrix(mat) can convert a rotation matrix to a quaternion.

The angle between two quaternions is computed by the angleBetweenQuats function, which requires a deeper knowledge of quaternions to derive.

1-2-three
example 12: look towards

<!DOCTYPE html>
<html>
<head>
<title>example 12: look towards</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript" src="js/TweakedOrbitControls.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();
}

function angleBetweenQuats(qBefore,qAfter) {
  q1 = new THREE.Quaternion();
  q1.copy(qBefore);
  q1.inverse();
  q1.multiply(qAfter);
  var halfTheta = Math.acos( q1.w );
  return 2*halfTheta;
}

var redCube;
var up = new THREE.Vector3(0,1,0);

function lookTowards(fromObject, toPosition, dTheta) {
  var quat0 = fromObject.quaternion;
  var eye = fromObject.position;
  var center = toPosition;
  var mat = new THREE.Matrix4();
  mat.lookAt(center,eye,up);
  var quat1 = new THREE.Quaternion();
  quat1.setFromRotationMatrix( mat );
  var deltaTheta = angleBetweenQuats(quat0,quat1);
  var frac = dTheta/deltaTheta;
  if (frac>1)  frac=1;
  fromObject.quaternion.slerp(quat1,frac);
}

function VWBug(scene,loc,loader) {
  this.rotSpeed = 1.0;
  this.goalPos = redCube.position;
  var that = this;
  this.onScene = function(scn) {
    that.mesh = scn.getObjectByName("Bug");
    that.mesh.material.shininess = 5;
    that.mesh.position.copy(loc);
    fixMatrix(that.mesh);
    scene.add(that.mesh);
  };
  loader.load( "models/vwbug/vwbug-scene.json", this.onScene );
  
  this.prerender = function(dt) {  
    if (!this.mesh)  return;
    var dTheta = dt*this.rotSpeed;
    lookTowards(this.mesh,this.goalPos,dTheta);
  };
}

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

var 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 looks toward negative z with y up
  camera.position.set( 5, 5, 50 );
  
  var control = new THREE.OrbitControls(camera,canv);
  
  redCube = new THREE.Mesh(
    new THREE.CubeGeometry( 1, 1, 1 ),
    new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
  );
  redCube.position.set(10,0,0);
  scene.add( redCube );
  
  var greenCube = new THREE.Mesh(
    new THREE.CubeGeometry( 1, 1, 1 ),
    new THREE.MeshLambertMaterial( { color: 0x00FF00 } )
  );
  greenCube.position.set(0,0,10);
  scene.add( greenCube );
  
  var blueCube = new THREE.Mesh(
    new THREE.CubeGeometry( 1, 1, 1 ),
    new THREE.MeshLambertMaterial( { color: 0x0000FF } )
  );
  blueCube.position.set(10,10,0);
  scene.add( blueCube );

var loader = new THREE.ObjectLoader(  );
  var bug = new VWBug(scene,new THREE.Vector3(0,0,0),loader);

var light = new THREE.PointLight( 0xFFFFFF );
  light.position.set( 20, 0, 20 );
  scene.add( light );
  
  var lightAmb = new THREE.AmbientLight( 0x999999 );
  scene.add( lightAmb );
  
  function onKeyDown(evt) {
    var result;
    switch (evt.keyCode) {
      case 49: // '1'
        bug.goalPos = redCube.position;
        break;
      case 50: // '2'
        bug.goalPos = greenCube.position;
        break;
      case 51: // '3'
        bug.goalPos = blueCube.position;
        break;
    }
  }

window.addEventListener('keydown', onKeyDown, false );
  
  var clock = new THREE.Clock();
  
  function animate() {
    var dt = clock.getDelta();
    control.update(dt);
    bug.prerender(dt);
    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>