picking

One basic way to interact with models in a scene is to click on them with the mouse. In order to determine which model has been clicked on, a ray is shot into the scene from the clicked location, and the models intersected by the ray are determined. Shooting rays is also important to provide other functionality like determining what is hit by a bullet or clamping an object to the terrain directly below it. This example allows you to click one of two vehicles and then drive the selected vehicle using the WASD keys.

In order to determine intersection of a specific set of models with a ray, we need to keep a list of the eligible models. This list is called colliders, and the mesh of each model is added to it via a line like the following.

 colliders.push( mesh );

When the mouse is clicked, we first determine the X and Y coordinates of the click. The coordinates are then scaled in the range of [-1,+1] (why?). Adding in an arbitrary positive Z component, we have a vector originating at the mouse click and pointing directly into the screen. This vector is in the camera's coordinate frame.

 projector.unprojectVector( vector, camera );

The vector is then converted to world coordinates using a projector. A ray originating from the camera pointing in the specified direction is constructed. The ray is then intersected with the set of colliders, and collisions list holds the results.

var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var collisions = ray.intersectObjects( colliders );

The collisions list contains information that can provide access to the selected model.

selectedObject = collisions[0].object;

1-2-three
example 19: picking

<!DOCTYPE html>
<html>
<head>
<title>example 19: picking</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 );

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( -15, 10, 15 );
  camera.lookAt( new THREE.Vector3(0,0,0) );
  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 colliders = [];
  
  var loader = new THREE.ObjectLoader(  );
  var mesh;
  var onScene = function(scn) {
    mesh = scn.getObjectByName("Bug");
    fixMatrix(mesh);
    scene.add(mesh);
    colliders.push( mesh );
  };
  loader.load( "models/vwbug/vwbug-scene.json", onScene );
  var mesh2;
  var onScene2 = function(scn) {
    mesh2 = scn.getObjectByName("Bug");
    fixMatrix(mesh2);
    scene.add(mesh2);
    colliders.push( mesh2 );
    mesh2.position.set(5,0,0);
  };
  loader.load( "models/vwbug/vwbug-scene.json", onScene2 );
  
  var lastFrameTime = null;
  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;
    }
  }
  
  function mousedown( event ) {
    //canv.focus();
    //event.preventDefault();
    mouseX = ( event.pageX / w ) * 2 - 1;
    mouseY = - ( event.pageY / h ) * 2 + 1;    
    var ray = new THREE.Raycaster( );
    ray.setFromCamera(new THREE.Vector3(mouseX,mouseY,0), camera);
    var collisions = ray.intersectObjects( colliders );
    if (collisions.length>0) {
      selectedObject = collisions[0].object;
      newSelection = true;
    }
  }
  
  var drivenVehicle;
  var rotateLeft = false;
  var rotateRight = false;
  var moveAhead = false;
  var moveBackwards = false;
  var newSelection, selectedObject;
  canv.addEventListener('keydown',onKeyDown,false);
  canv.addEventListener('keyup',onKeyUp,false);
  canv.addEventListener('mousedown',mousedown,false);
  var clock = new THREE.Clock();
  
  function animate() {
    if (newSelection)
      drivenVehicle = selectedObject;
    var dt = clock.getDelta();
    if (drivenVehicle)
    {
      var dYaw, dPos, ahead;
      if (rotateLeft)
      {
        dYaw = dt*rotationSpeed;
        drivenVehicle.rotation.y += dYaw;
      }
      if (rotateRight)
      {
        dYaw = dt*rotationSpeed;
        drivenVehicle.rotation.y -= dYaw;
      }    
      if (moveAhead)
      {
        dPos = dt*translationSpeed; 
        drivenVehicle.translateZ(dPos);
      }
      if (moveBackwards)
      {
        dPos = dt*translationSpeed; 
        drivenVehicle.translateZ(-dPos);
      }
    }
    renderer.render(scene, camera);
    requestAnimationFrame( animate );
  }
  
  requestAnimationFrame( animate );
};

window.onload = init;
window.onresize = init;
</script>
</head>
<body><canvas style="width:100%;height:100%;border:1px gray solid;" tabindex="1" ></body>
</html>