many blocks

Demonstrates the how to set up destructable objects composed of multiple bodies and how to apply an initial velocity to a body.

1-2-three
example 39: many blocks

<!DOCTYPE html>
<html>
<head>
<title>example 39: many blocks</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 init() {
  var bodyA = [];
  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( new THREE.Color(0xeeeeee), 1 );

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 );
  
  // 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);
  
  // initialize physics engine
  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));
  
  // 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);
  
  bodyA.push( new Brick(scene,dynamicsWorld, new Ammo.btVector3(0,-13,0) ) );
  bodyA.push( new Brick(scene,dynamicsWorld, new Ammo.btVector3(0,-9,0) ) );
  bodyA.push( new Brick(scene,dynamicsWorld, new Ammo.btVector3(0,-5,0) ) );
  bodyA.push( new Brick(scene,dynamicsWorld, new Ammo.btVector3(0,-1,0) ) );
  
  
  function onKeyDown(evt) {
    console.log("in onKeyDown");
    bodyA.push( new Box(scene,dynamicsWorld) );
  }
  
  window.addEventListener("keydown",onKeyDown);
  
  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);
	  
    // move body (block)
    for (var i=0;i<bodyA.length;i++) {
      bodyA[i].update();
    }

renderer.render(scene, camera);
    requestAnimationFrame(animate);
  }
  
  requestAnimationFrame(animate);
}

window.onload = init;

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

many blocks

1-2-threeexample 39: many blocks

1-2-three
example 39: many blocks