fps collision control

Demonstrates an FPS cameral control that handles collison (will not move through the geometry) through the use of a physics engine. Click to initialize pointer lock and use WASD to move.

1-2-three
example 30: fps collision control

<!DOCTYPE html>
<html>
<head>
<title>example 30: fps collision control</title>

function b2three(trans,mat) {
  var basis = trans.getBasis();
  var origin = trans.getOrigin();
  var m = mat.elements;
  var v = basis.getRow(0);
  m[0] = v.x(); m[4+0] = v.y(); m[8+0] = v.z(); m[12+0] = origin.x();
  v = basis.getRow(1);
  m[1] = v.x(); m[4+1] = v.y(); m[8+1] = v.z(); m[12+1] = origin.y();
  v = basis.getRow(2);
  m[2] = v.x(); m[4+2] = v.y(); m[8+2] = v.z(); m[12+2] = origin.z();
  m[3] = 0.0; m[4+3] = 0.0; m[8+3] = 0.0; m[12+3] = 1.0;
}

function initPhysics() {
  var collision_config = new Ammo.btDefaultCollisionConfiguration();
  var dispatcher = new Ammo.btCollisionDispatcher( collision_config );
  var overlappingPairCache =  new Ammo.btDbvtBroadphase();
  var solver = new Ammo.btSequentialImpulseConstraintSolver();
  dynamicsWorld = new Ammo.btDiscreteDynamicsWorld( dispatcher, overlappingPairCache, solver, collision_config );
  dynamicsWorld.setGravity(new Ammo.btVector3(0, -6, 0));
  return dynamicsWorld;
}

// body2world storage
var trans=new Ammo.btTransform();

function body2world(body,v3B) {
  var trans = body.getWorldTransform();
  var result = trans.op_mul(v3B);
  return result;
}

function makeStaticBox(color,xdim,ydim,zdim,x,y,z) {
  // box physics
  var shape=new Ammo.btBoxShape(new Ammo.btVector3(xdim/2,ydim/2,zdim/2));
  var transform=new Ammo.btTransform();
  transform.setIdentity();
  transform.setOrigin(new Ammo.btVector3(x,y,z));
  var localInertia=new Ammo.btVector3(0,0,0);
  var motionState = new Ammo.btDefaultMotionState( transform );
  var cInfo = new Ammo.btRigidBodyConstructionInfo(0, motionState, shape, localInertia);
  var body=new Ammo.btRigidBody(cInfo);
  dynamicsWorld.addRigidBody(body);
  
  // ground visualization
  var box = new THREE.Mesh(
    new THREE.CubeGeometry( xdim, ydim, zdim ),
    new THREE.MeshPhongMaterial( { color: color, ambient: color } )
  );
  scene.add( box );
  box.position.set(x,y,z);
}

function init() {
  
  var mycanvas = document.getElementsByTagName("canvas")[0];
  var w = mycanvas.clientWidth;
  var h = mycanvas.clientHeight;

renderer = new THREE.WebGLRenderer({canvas:mycanvas});
  renderer.setSize( w, h );

scene = new THREE.Scene();
  scene.matrixAutoUpdate = false;

camera = new THREE.PerspectiveCamera(
      35,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );

var light = new THREE.PointLight( 0xFFFFFF );
  light.position.set( -10, 40, 10 );
  scene.add( light );
  
  light = new THREE.AmbientLight( 0x555555 );
  scene.add( light );
  
  dynamicsWorld = initPhysics();
  
  // create ground
  makeStaticBox("#555555",20,1,20,0,-0.5,0);
  
  // create low walls
  makeStaticBox("#555555",20,1,1,0,0.5,10);
  makeStaticBox("#555555",20,1,1,0,0.5,-10);
  makeStaticBox("#555555",1,1,20,10,0.5,0);
  makeStaticBox("#555555",1,1,20,-10,0.5,0);
  
  // create reference blocks
  for (var x=-10;x<=10;x+=10) {
	for (var z=-10;z<=10;z+=10) {
		if (x===0 && z===0)
			continue;
		makeStaticBox("#ff0000",5,5,5,x,0.5,z);
	 }
  }
  
  var controls = new PointerLockAngleControls(camera);
  var radius = 1;
  var height = 2;
  var eyeheight = 1.5;
  var visualizeB = false;
  var fps = new FPSMover(radius,height,eyeheight,scene,dynamicsWorld,camera,visualizeB);

var t0=new Date().getTime()/1000;

window.onload = init;
window.onresize = init;

</script>
 </head>
 <body>
   <canvas id="canvas" style="width:100%;height:95%;border:1px gray solid;"></canvas>
 </body>
</html>

fps collision control

1-2-threeexample 30: fps collision control

1-2-three
example 30: fps collision control