heightfield physics

Shows how to use physics together with heightfield terrain, which is specified by height values at uniformly spaced locations ("posts") in the x-z plane. A slightly updated version of the FPS physics-based motion model controls the camera. Note also the use of a directional light.

1-2-three
example 41: heightfield physics

<!DOCTYPE html>
<html lang="en">
<head>
  <title>heightfield physics</title>
</head>
<body>

function setMeshTransformFromBody(objPhys,objThree) {
  var ms = objPhys.getMotionState();

if (ms) {
    ms.getWorldTransform(transformAux1);
    var p = transformAux1.getOrigin();
    var q = transformAux1.getRotation();
    objThree.position.set(p.x(), p.y(), p.z());
    objThree.quaternion.set(q.x(), q.y(), q.z(), q.w());
  }
}

// Replacement for missing cross method on Ammo.Vector3 
function crossproduct(vA,vB) {
  var x1 = vA.x();
  var y1 = vA.y();
  var z1 = vA.z();
  var x2 = vB.x();
  var y2 = vB.y();
  var z2 = vB.z();
  return new Ammo.btVector3(y1*z2-z1*y2,z1*x2-z2*x1,x1*y2-x2*y1);
}
        
function FPSMover(radius,height,eyeheight,scene,dynamicsWorld,camera,visualizeB) {
  this.controls = new PointerLockAngleControls(camera);
  // z value supposedly not used, but setting to radius just in case
  var shape = new Ammo.btCylinderShape(new Ammo.btVector3(radius,height/2,radius));
  var transform = new Ammo.btTransform();
  transform.setIdentity();
  // slightly off the ground
  transform.setOrigin(new Ammo.btVector3(-22,5.01,22));
  localInertia = new Ammo.btVector3(0,0,0);
  var motionState = new Ammo.btDefaultMotionState( transform );
  var mass=2;
  shape.calculateLocalInertia(mass,localInertia);
  var cInfo = new Ammo.btRigidBodyConstructionInfo(mass,motionState,shape,localInertia);
  //cInfo.set_m_friction(1.0);
  this.body = new Ammo.btRigidBody(cInfo);
  this.body.setWorldTransform(transform);
  // turns off all rotation
  this.body.setAngularFactor(new Ammo.btVector3(0,0,0));
  // keeps physics from going to sleep (from bullet documentation)
  var DISABLE_DEACTIVATION = 4; 
  this.body.setActivationState(DISABLE_DEACTIVATION);
  dynamicsWorld.addRigidBody(this.body);
  
  // add visualization of mover
	this.mesh = new THREE.Mesh(
	  new THREE.CylinderGeometry( 1,1,2*1 ),
	  new THREE.MeshLambertMaterial( { color: 0x00FF00 } )
  );
  scene.add( this.mesh );
  this.mesh.visible = visualizeB;
  
  // fps constants and storage
  this.ahead = false;
  this.right = false;
  this.left = false;
  this.back = false;
  this.speed = 5;
  
  var controlsObj = this.controls.getObject();
  this.mesh.add( controlsObj );
  controlsObj.position.set(0,eyeheight-height/2,0);
  
  this.pos = new THREE.Vector3();
  this.quat = new THREE.Quaternion();
  this.scale = new THREE.Vector3();
  
  this.dumpMatrix = function(prefix) {
    this.mesh.matrixWorld.decompose(this.pos,this.quat,this.scale);
    console.log(prefix,this.pos.x,this.pos.y,this.pos.z);
  };
  
  this.prerender = function(dt) {
    // move mesh
    setMeshTransformFromBody(this.body,this.mesh);

// get camera direction
    var dir3 = new THREE.Vector3();
    this.controls.getDirection(dir3);
    // convert to Ammo vector, project to plane
    var dir = new Ammo.btVector3(dir3.x,0,dir3.z); 
    var yUnit = new Ammo.btVector3(0,1,0);
    dir.normalize();
    // right direction is dir X yUnit
    //var right = dir.cross(yUnit); // cross method is now mysteriously absent
    var right = crossproduct(dir,yUnit);
      
    // set up physics for next time
    var velV = new Ammo.btVector3(0,-1,0);
    if (this.ahead)
      velV.op_add(dir);
    if (this.right)
      velV.op_add(right);
    if (this.left)
      velV.op_sub(right);
    if (this.back)
      velV.op_sub(dir);
    velV.normalize();
    velV.op_mul(this.speed);
    this.body.setLinearVelocity( velV );
  };
}

// Graphics variables
var container;
var camera, controls, scene, renderer;
var terrainMesh, terrainGeometry, texture;
var clock = new THREE.Clock();

// Physics variables
var collisionConfiguration;
var dispatcher;
var broadphase;
var solver;
var physicsWorld;
var terrainBody;
var dynamicObjects = [];
var transformAux1 = new Ammo.btTransform();

var fpsmover;

// ---------------------------------------------------------------------
function init() {
  initGraphics();
  initLights();

loadTerrainMesh(function() {
    initPhysics();

var radius = 1;
    var height = 2;
    var eyeheight = 1.5;
    var dynamicsWorld = physicsWorld;
    var visualizeB = true;
    fpsmover = new FPSMover(radius,height,eyeheight,scene,dynamicsWorld,camera,visualizeB);

updateAndRender();
  });
}

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

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

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.2, 2000);
  scene = new THREE.Scene();
  
  function lockPointer() {
    var element = document.body;
    element.requestFullscreen = element.requestFullscreen || element.mozRequestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen;
    element.requestFullscreen();
    element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;
    element.requestPointerLock();
  }
  renderer.domElement.onmousedown = lockPointer;
  
   function onKeyDown(evt) {
    var index;
    switch (evt.keyCode) {
      case 65: // 'a'
        index = 0;
        fpsmover.left = true; 
        break;
      case 68: // 'd'
        index = 1;
        fpsmover.right = true; 
        break;
      case 87: // 'w'
        index = 3;
        fpsmover.ahead = true; 
        break;
      case 83: // 's'
        index = 2;
        fpsmover.back = true; 
        break;
    }
  }

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

window.onkeydown = onKeyDown;
  window.onkeyup = onKeyUp;

}

// ---------------------------------------------------------------------
function loadTerrainMesh(onFinished) {
  var loader = new THREE.ObjectLoader();
  loader.load('models/mesh-terrain/heightmap.json', function(data) {
    // pick out geometry and fix it up
    var geometry = data.children[0].geometry;
    var matrixToApply = new THREE.Matrix4().makeRotationFromQuaternion(data.children[0].quaternion);
    geometry.applyMatrix(matrixToApply);

data.children[0].quaternion.set(0, 0, 0, 1); // reset to identity
    terrainGeometry = geometry;

terrainMesh = data.children[0];
    terrainMesh.receiveShadow = true;
    terrainMesh.castShadow = true;
    scene.add(terrainMesh);

onFinished && onFinished(terrainMesh);
  });
}

// ---------------------------------------------------------------------
function initPhysics() {
  // Physics configuration
  collisionConfiguration = new Ammo.btDefaultCollisionConfiguration();
  dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration);
  broadphase = new Ammo.btDbvtBroadphase();
  solver = new Ammo.btSequentialImpulseConstraintSolver();
  physicsWorld = new Ammo.btDiscreteDynamicsWorld(dispatcher, broadphase, solver, collisionConfiguration);
  physicsWorld.setGravity(new Ammo.btVector3(0, -9.8, 0));

var heightfieldRigidBody = new Ammo.HeightfieldRigidBody(terrainMesh);
  physicsWorld.addRigidBody(heightfieldRigidBody);
}

// ---------------------------------------------------------------------
function initLights() {
  var light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(100, 100, 50);
  scene.add(light);
  
  var ambient = new THREE.AmbientLight( 0x999999 );
  scene.add(ambient);
}

// ---------------------------------------------------------------------
function updateAndRender() {
  var deltaTime = clock.getDelta();
  physicsWorld.stepSimulation(deltaTime, 10);
  fpsmover.prerender(deltaTime);
  renderer.render(scene, camera);
  requestAnimationFrame(updateAndRender);
}

window.onload = init;

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

heightfield physics

1-2-threeexample 41: heightfield physics

1-2-three
example 41: heightfield physics