moving ahead

Previously we rotated a model. Now we'll translate it as well as rotate under user control.

First we set up some speed constants.

var rotationSpeed = 1.5;
var translationSpeed = 2.5;

We also set up key up and down event handlers. A and D turn left and right, while W and S drive forwards and backwards. The handlers must be installed on the window as previously.

Since the user can hold down the control buttons for any length of time, we define special variables to capture the state of the buttons.

var rotateLeft = false;
var rotateRight = false;
var moveAhead = false;
var moveBackwards = false;

The render function contains code to actually perform the animation. For rotation, the code is similar to a previous example. Translation is not much different.

if (moveAhead)
{
	dPos = dt*translationSpeed; 
	mesh.translateZ(dPos);
}

The above is one quarter of the animation code. Here if the variable moveAhead indicates that we should translate forwards, the appropriate amount of translation is computed and the translateZ function implements it. Note that the +Z direction is forward in Three, and that the translateZ method uses the model's Z axis.

Note also that all rotation in this example uses the model's parent (i.e. the world) Y axis. This works fine because here the model's Y axis is the same as the parents's Y axis.

1-2-three
example 8: moving ahead

<!DOCTYPE html>
<html>
<head>
<title>example 8: moving ahead</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( -2, 2, 25 );

var light = new THREE.PointLight( 0xFFFFDD );
  light.position.set( -15, 10, 15 );
  scene.add( light );
  
  var ambient = new THREE.AmbientLight( 0x999999 );
  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.5;
  var translationSpeed = 2.5;
  
  function onKeyDown(evt) {
    switch (evt.keyCode) {
      case 65: // 'a'
        rotateLeft = true; break;
      case 68: // 'd'
        rotateRight = true; break;
      case 87: // 'w'
        moveAhead = true; break;
      case 83: // 's'
        moveBackwards = true; break;
    }
  }
  
  function onKeyUp(evt) {
    switch (evt.keyCode) {
      case 65: // 'a'
        rotateLeft = false; break;
      case 68: // 'd'
        rotateRight = false; break;
      case 87: // 'w'
        moveAhead = false; break;
      case 83: // 's'
        moveBackwards = false; break;
    }
  }
  
  var rotateLeft = false;
  var rotateRight = false;
  var moveAhead = false;
  var moveBackwards = false;
  window.onkeydown = onKeyDown;
  window.onkeyup = onKeyUp;	
  
  var clock = new THREE.Clock();
  
  function animate() {
    var dt = clock.getDelta();
    if (mesh)
    {
      var dYaw, dPos, ahead;
      if (rotateLeft)
      {
        dYaw = dt*rotationSpeed;
        mesh.rotation.y += dYaw;
      }
      if (rotateRight)
      {
        dYaw = dt*rotationSpeed;
        mesh.rotation.y -= dYaw;
      }    
      if (moveAhead)
      {
        dPos = dt*translationSpeed; 
        mesh.translateZ(dPos);
      }
      if (moveBackwards)
      {
        dPos = dt*translationSpeed; 
        mesh.translateZ(-dPos);
      }
    }
    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>