crosshairs

Demonstrates a good way to display a crosshair. When running the application, drag with the right mouse button to center the crosshair on a vehicle, and then hit "enter" to select the vehicle. The vehicle can then be driven with the WASD keys.

A crosshair can be created simply by parenting a properly located billboard to the camera. One problem with this approach is that the crosshair can disappear behind the scene geometry. This code avoids this problem entirely by creating a seperate scene and camera for the crosshair alone, and rendering the crosshair on top of (i.e. after) the main scene. Note that the automatic clearing behavior of the renderer must be turned off for this to work via: renderer.autoClearColor = false;

1-2-three
example 40: crosshairs

<!DOCTYPE html>
<html>
<head>
<title>example 19: picking</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript" src="js/three/examples/js/controls/OrbitControls.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.setClearColor( 0x999999 );
  renderer.autoClearColor = false;
  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 control = new THREE.OrbitControls(camera,canv);

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 crosshairScene = new THREE.Scene();
  var crosshairCamera =  new THREE.PerspectiveCamera(
      15,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );

};

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

crosshairs

1-2-threeexample 40: crosshairs

1-2-three
example 40: crosshairs