shooting

Demonstrates how to shoot a ray whose direction is defined relative to a mesh. Here pressing the spacebar causes a ray to shoot from the front of the WASD drivable vehicle. A red cube is centered on the collision point with the surrounding walls.

1-2-three
example 26: shooting

<!DOCTYPE html>
<html>
<head>
<title>example 26: shooting</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( -2, 20, -25 );

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 cube = new THREE.Mesh(
      new THREE.CubeGeometry( 1, 1, 1 ),
      new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
  );
  scene.add( cube );
  
  var colliders = [];
  
  var loader = new THREE.ObjectLoader(  );
  var mesh;
  var onScene = function(scn) {
    mesh = scn.getObjectByName("Bug");
    scene.add(mesh);
    fixMatrix(mesh);
    camera.lookAt(mesh.position);
  };
  loader.load( "models/vwbug/vwbug-scene.json", onScene );
  
  var onSceneWalls = function(scn) {
    var wallsMesh = scn.getObjectByName("Walls");
    scene.add(wallsMesh);
    fixMatrix(wallsMesh);
    colliders.push(wallsMesh);
  };
  loader.load( "models/walls/walls.json", onSceneWalls );
 
  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;
      case 32: // spacebar
        // shoot here
        var ahead = new THREE.Vector3(0,0,1);
        ahead.transformDirection(mesh.matrixWorld);
        var orig = mesh.position.clone();
        var ray = new THREE.Raycaster( orig, ahead );
        var collisions = ray.intersectObjects( colliders );
        if (collisions.length>0) {
            var point = collisions[0].point;
            cube.position.copy( point );
        }
    }
  }
  
  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.addEventListener("keydown", onKeyDown);
  window.addEventListener("keyup", onKeyUp);
  
  var renderFunc = function() {
    var now = new Date().getTime()/1000.0;
    if (lastFrameTime!==null)
    {
      var dt = now - lastFrameTime;
      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);
      }
    }
    lastFrameTime = now;
    renderer.render(scene, camera);
  };
  
  setInterval(renderFunc,10);
};

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