key presses

We have already seen examples where the camera is controlled by a combination of mouse clicks and key presses. Many simulations require that the mouse and keyboard be used for additional purposes, for instance, to pull a trigger or activate a door.

Keyboard and mouse events are detected by writing functions to detect them, and telling the browser when they are to be invoked. The basic set of events is listed below.

onkeydown: fires whenever a key is pressed
onkeyup: fires whenever a key is released
onmousedown: fires whenever a mouse button is pressed
onmouseup: fires whenever a mouse button is released

There are some additional higher level events as well, which you can research on the web, namely onkeypress, onclick, and ondblclick. The exact implementation of these seems to vary across browsers, making them trickier to implement reliably.

Here is an example of a simple key press handler.

function onKeyDown(evt) {
  switch (evt.keyCode) {
    case 82: // 'r'
    rPressed = true; break;
  }
}

Note that we figure out which key is pressed by checking a key code. A full list of JavaScript key codes is available many places on the web, such as here. In order for the event handling function to be called at the right time, it must be installed.

window.addEventListener('keydown', onKeyDown, false );

The above line installs the onKeyDown function to listen for key presses in the window.

1-2-three
example 6: key presses

<!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);
  };
  loader.load( "models/vwbug/vwbug-scene.json", onScene );
  
  var lastFrameTime = null;
  var rotationSpeed = 1.0;
  
  function onKeyDown(evt) {
    switch (evt.keyCode) {
      case 82: // 'r'
        rPressed = true; break;
    }
  }
  
  function onKeyUp(evt) {
    switch (evt.keyCode) {
      case 82: // 'r'
        rPressed = false; break;
    }
  }
  
  var rPressed = false;
  window.addEventListener('keydown', onKeyDown, false );
  window.addEventListener('keyup', onKeyUp, false );
  
  var clock = new THREE.Clock();
  
  var animate = function() {
    var dt = clock.getDelta();
    if (rPressed)
    {
      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>