collision scene

Demonstrates loading a scene and creating collision shapes that can work together with an FPS (WASD keys) controller. The 'm' key toggles visualization of the collision meshes. The box, sphere, and plane collision shapes are supported, however the plane used by the physics is infinite in all directions, so if this is not what you need, use boxes! Note that the geometry should have the scale applied in Blender before exporting (Ctrl-A, choose scale).

1-2-three
example 33: collision scene

<!DOCTYPE html>
<html>
<head>
<title>example 33: collision scene</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript" src="js/PointerLockAngleControls.js"></script>
<script type="text/javascript" src="js/ammo/ammo.small.js"></script>
<script type="text/javascript">

function createCollisionShape(mesh,mass,shape,color,dynamicsWorld) {
  mesh.updateMatrixWorld();
  if (!mesh.geometry.boundingBox)  
    mesh.geometry.computeBoundingBox();
  if (!mesh.geometry.boundingSphere)  
    mesh.geometry.computeBoundingSphere();

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 three2b(mat,trans) {
  var basis = trans.getBasis();
  var origin = trans.getOrigin();
  var m = mat.elements;
  var v = basis.getRow(0);
  v.setX(m[0]); v.setY(m[4+0]); v.setZ(m[8+0]); origin.setX(m[12+0]); 
  v = basis.getRow(1);
  v.setX(m[1]); v.setY(m[4+1]); v.setZ(m[8+1]); origin.setY(m[12+1]);
  v = basis.getRow(2);
  v.setX(m[2]); v.setY(m[4+2]); v.setZ(m[8+2]); origin.setZ(m[12+2]);
}

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;
}

function applyScale(mesh) {
  var verts = mesh.geometry.vertices;
  for (var i=0;i<mesh.geometry.vertices.length;i++) {
    var vertex = verts[i];
    vertex.x *= mesh.scale.x;
    vertex.y *= mesh.scale.y;
    vertex.z *= mesh.scale.z;
  }
  mesh.scale.set(1,1,1);
  mesh.geometry.computeBoundingBox();
  mesh.geometry.computeBoundingSphere();
}

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

var renderer = new THREE.WebGLRenderer({canvas:canv});
  renderer.setSize( w, h );
  renderer.setClearColor(new THREE.Color(0xeeeeee), 1);

var scene; // set to loaded scene below

var camera = new THREE.PerspectiveCamera(
      15,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );
  //camera.position.set( -1, 5, 15 );

var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
  light.position.set( 0, 1, 0 );
  
  var ambient = new THREE.AmbientLight( 0x999999 );

function onKeyDown(evt) {
    console.log("in onKeyDown");
    switch (evt.keyCode) {
      case 65: // 'a'
        fps.left = true; 
        break;
      case 68: // 'd'
        fps.right = true; 
        break;
      case 87: // 'w'
        fps.ahead = true; 
        break;
      case 83: // 's'
        fps.back = true; 
        break;
      case 77: // 'm'
        toggleCollisionMeshViz();
        break;
    }
  }

function onKeyUp(evt) {
    switch (evt.keyCode) {
      case 65: // 'a'
        fps.left = false;
        break;
      case 68: // 'd'
        fps.right = false;
        break;
      case 87: // 'w'
        fps.ahead = false;
        break;
      case 83: // 's'
        fps.back = false;
        break;
    }
  }

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

collision scene

1-2-threeexample 33: collision scene

1-2-three
example 33: collision scene