lander

This example shows a simple lunar lander with main thruster controlled by the space bar and trim thrusters controlled by the WASD keys. There seems to currently be a bug that causes some carry-over between successive runs of the application, so to get a clean start, it's best to run it by pressing the "Popup Canvas" button. This example demonstrates encapsulation of a graphical object controlled by physics as a JavaScript object and how to apply forces in a physics-based simulation.

Forces must be specified in world coordinates. For a lander, the thrust forces are most easily specified with respect to the body (lander) frame. Therefore, they must be converted to the world frame by multiplication by a transform, which occurs in the body2world function.

Note also that in this application, torques are explicitly applied to the lander. It would be worth trying the applyForce(force,relpos) function to avoid this requirement. Note that while relpos is the position relative to the origin of the object, it is specified in world coordinates, and so is force.

1-2-three
example 20: lander

<!DOCTYPE html>
<html>
<head>
<title>example 22: ammo.js lander</title>

<script type="text/javascript" src="js/ammo/ammo.small.js"></script>
<script type="text/javascript" src="js/three/three.js"></script>

<script type="application/x-javascript">

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();
  var dynamicsWorld = new Ammo.btDiscreteDynamicsWorld( dispatcher, overlappingPairCache, solver, collision_config );
  dynamicsWorld.setGravity(new Ammo.btVector3(0, -12, 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 Lander(scene,dynamicsWorld) {
  // lander chassis physics
  var boxShape = new Ammo.btBoxShape(new Ammo.btVector3(2,0.5,2));
  var boxTransform = new Ammo.btTransform();
  boxTransform.setIdentity();
  boxTransform.setOrigin(new Ammo.btVector3(0,1,0));
  localInertia = new Ammo.btVector3(0,0,0);
  var motionState = new Ammo.btDefaultMotionState( boxTransform );
  var mass=2;
  boxShape.calculateLocalInertia(mass,localInertia);
  var cInfo = new Ammo.btRigidBodyConstructionInfo(mass,motionState,boxShape,localInertia);
  this.body = new Ammo.btRigidBody(cInfo);
  this.body.setWorldTransform(boxTransform);
  dynamicsWorld.addRigidBody(this.body);
  
  // lander chassis visualization
  this.landerCube = new THREE.Mesh(
      new THREE.CubeGeometry( 2*2,2*0.5,2*2 ),
      new THREE.MeshLambertMaterial( { color: 0x00FF00, ambient: 0x00FF00 } )
  );
  scene.add( this.landerCube );
  this.landerCube.matrixAutoUpdate = false;
  
  // thrust visualization
  this.thrustCubeA = [];
  var thrustCubeLocA = [[2,0],[-2,0],[0,2],[0,-2]];
  
  for (var i=0;i<4;i++) {
    var thrustCube = new THREE.Mesh(
      new THREE.CubeGeometry( 1, 1, 1 ),
      new THREE.MeshBasicMaterial( { color: 0xFF0000 } )
    );
    var loc = thrustCubeLocA[i];
    thrustCube.position.set(loc[0],-2,loc[1]);
    this.landerCube.add( thrustCube );
    thrustCube.visible = false;
    this.thrustCubeA.push(thrustCube);
  }
  
  this.mainThrustCube = new THREE.Mesh(
    new THREE.CubeGeometry( 2, 2, 2 ),
    new THREE.MeshBasicMaterial( { color: 0xFF0000 } )
  );
  this.mainThrustCube.position.set(0,-3,0);
  this.landerCube.add( this.mainThrustCube );
  this.mainThrustCube.visible = false;
  
  // lander physics constants and storage
  this.mainOn = false;
  this.trimOnA = [false,false,false,false];
  this.mainForce = new Ammo.btVector3(0,100,0);
  this.trimForce = new Ammo.btVector3(0,20,0);
  this.torque = new Ammo.btVector3(0,0,0);
  this.forceW = new Ammo.btVector3();
  this.torqueW = new Ammo.btVector3();
  this.torqueA = [[0,1],[0,-1],[-1,0],[1,0]]; 
  
  this.prerender = function(dt) {
    // move objects
    var trans=this.body.getWorldTransform(trans);
    var mat = this.landerCube.matrixWorld;
    b2three(trans,mat);
    
    // set up physics for next time
    for (var i=0;i<4;i++) {
      if (this.trimOnA[i]) {
        this.forceW = body2world(this.body,this.trimForce); 
        this.body.applyCentralForce(this.forceW);
        var leverLength = 2.0;
        var tau = this.trimForce.length()*leverLength;
        this.torque.setX(this.torqueA[i][0]*tau);
        this.torque.setY(0);
        this.torque.setZ(this.torqueA[i][1]*tau);
        this.torqueW = body2world(this.body,this.torque);
        this.body.applyTorque(this.torqueW);
      }
    }
    if (this.mainOn) {
      this.forceW = body2world(this.body,this.mainForce); 
      this.body.applyCentralForce(this.forceW);
    }
  };
}

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
  );
  camera.position.set( -30, 0, 50 );
  scene.add(camera);
  camera.lookAt( new THREE.Vector3(0,-15,0) );

var light = new THREE.PointLight( 0xFFFF33 );
  light.position.set( 10, 0, 10 );
  scene.add( light );
  
  light = new THREE.AmbientLight( 0xCCCCBB );
  scene.add( light );
  
  var dynamicsWorld = initPhysics();
  
  // ground physics
  var groundShape=new Ammo.btBoxShape(new Ammo.btVector3(20,10,20));
  var groundTransform=new Ammo.btTransform();
  groundTransform.setIdentity();
  groundTransform.setOrigin(new Ammo.btVector3(0,-25,0));
  var localInertia=new Ammo.btVector3(0,0,0);
  var motionState = new Ammo.btDefaultMotionState( groundTransform );
  var cInfo = new Ammo.btRigidBodyConstructionInfo(0, motionState, groundShape, localInertia);
  var body=new Ammo.btRigidBody(cInfo);
  dynamicsWorld.addRigidBody(body);
  
  // ground visualization
  var groundCube = new THREE.Mesh(
    new THREE.CubeGeometry( 2*20, 2*10, 2*20 ),
    new THREE.MeshLambertMaterial( { color: 0x0000FF } )
  );
  scene.add( groundCube );
  groundCube.position.set(0,-25,0);
  
  var lander = new Lander(scene,dynamicsWorld);
  
  var clock = new THREE.Clock();

function animate() {
    var dt = clock.getDelta();
    // cap dt to avoid instability
    var maxSecPerFrame = 1.0 / 20;
    if (dt > maxSecPerFrame) 
      dt = maxSecPerFrame;
      
    dynamicsWorld.stepSimulation(dt,1);
    lander.prerender(dt);
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);
  
  function onKeyDown(evt) {
    var index;
    switch (evt.keyCode) {
      case 65: // 'a'
        index = 0;
        lander.thrustCubeA[index].visible = true;
        lander.trimOnA[index] = true; 
        break;
      case 68: // 'd'
        index = 1;
        lander.thrustCubeA[index].visible = true;
        lander.trimOnA[index] = true; 
        break;
      case 87: // 'w'
        index = 3;
        lander.thrustCubeA[index].visible = true;
        lander.trimOnA[index] = true; 
        break;
      case 83: // 's'
        index = 2;
        lander.thrustCubeA[index].visible = true;
        lander.trimOnA[index] = true; 
        break;
      case 32: // spacebar
        lander.mainThrustCube.visible = true;
        lander.mainOn = true; 
        break;
    }
  }

function onKeyUp(evt) {
    switch (evt.keyCode) {
      case 65: // 'a'
        index = 0;
        lander.thrustCubeA[index].visible = false;
        lander.trimOnA[index] = false;
        break;
      case 68: // 'd'
        index = 1;
        lander.thrustCubeA[index].visible = false;
        lander.trimOnA[index] = false;
        break;
      case 87: // 'w'
        index = 3;
        lander.thrustCubeA[index].visible = false;
        lander.trimOnA[index] = false;
        break;
      case 83: // 's'
        index = 2;
        lander.thrustCubeA[index].visible = false;
        lander.trimOnA[index] = false;
        break;
      case 32: // spacebar
        lander.mainThrustCube.visible = false;
        lander.mainOn = false; 
        break;
    }
  }
  
  window.onkeydown = onKeyDown;
  window.onkeyup = onKeyUp;	
}

window.onload = init;

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