body axis rotation

This example shows how to rotate around the local x, y, and z axes of a mesh (body). Click in the canvas, and press 'x', 'y' or 'z' to rotate around body axes. Hold 'shift' to rotate around world axes.

After computing the angle of rotation, dTheta, the following code rotates the model:

quat.setFromAxisAngle(axis,dTheta);
if (shiftOn)  // world axes
  mesh.quaternion.multiplyQuaternions(quat,mesh.quaternion);
else  // body axes
  mesh.quaternion.multiply(quat);

The first step is to convert rotation expressed as an angle around a particular axis (which for this application is always a unit vector) to a quaternion. This is accomplished by the quaternion method setFromAxisAngle.

Rotation in the body (model) frame is accomplished by multiplying the quaternion representing the model's prior orientation with the rotation quaternion. Rotation in the parent frame is performed by multiplying the same two quaternions, but in the opposite order. Note in simple examples the parent frame is the world frame, but this need not be the case.

The model's quaternion represents the rotation necessary to go from the model frame to its parent's frame. If the additional rotation is added such that it is applied first, then the rotation happens in the model frame. If the additional rotation happens second, the conversion to the parent frame happens first, so the rotation is in the parent frame.

1-2-three
example 23: body axis rotation

<!DOCTYPE html>
<html>
<head>
<title>example 6: key presses</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, 1, 15 );
  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);
    requestAnimationFrame( render );
  };
  loader.load( "models/vwbug/vwbug-scene.json", onScene );
  
  var rotationSpeed = 1.0;
  
  function onKeyDown(evt) {
    switch (evt.keyCode) {
      case 88: // 'x'
        xRot = true; break;
      case 89: // 'y'
        yRot = true; break;
      case 90: // 'z'
        zRot = true; break;
      case 16: // SHIFT
        shiftOn = true; break;
    }
  }
  
  function onKeyUp(evt) {
    switch (evt.keyCode) {
      case 88: // 'x'
        xRot = false; break;
      case 89: // 'y'
        yRot = false; break;
      case 90: // 'z'
        zRot = false; break;
      case 16: // SHIFT
        shiftOn = false; break;
    }
  }
  
  var shiftOn = false;
  var xRot = false;
  var yRot = false;
  var zRot = false;
  window.onkeydown = onKeyDown;
  window.onkeyup = onKeyUp;	
  
  var xUnit = new THREE.Vector3(1,0,0);
  var yUnit = new THREE.Vector3(0,1,0);
  var zUnit = new THREE.Vector3(0,0,1);
  
  var axis = new THREE.Vector3();
  
  var quat = new THREE.Quaternion();
  
  var clock = new THREE.Clock();
  
  function animate() {
    var dt = clock.getDelta();
    var dTheta = dt*rotationSpeed;
    if (xRot)
      axis = xUnit;
    if (yRot)
      axis = yUnit;
    if (zRot)
      axis = zUnit;
    var moving = xRot || yRot || zRot;
    if (mesh && moving) {
      quat.setFromAxisAngle(axis,dTheta);
      if (shiftOn)  // world axes
        mesh.quaternion.multiplyQuaternions(quat,mesh.quaternion);
      else  // body axes
        mesh.quaternion.multiply(quat);
    }
    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>