kill visualization

Demonstrates the technique of switching from kinematic to physics-based animation when a model is destroyed. Drive over the red box to kill. Note that the mesh switching technique is also used here, slightly adapted to this more complicated setting.

1-2-three
example 35: kill animation

<!DOCTYPE html>
<html>
<head>
<title>example 35: kill animation</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript" src="js/TweakedOrbitControls.js"></script>
<script type="text/javascript" src="js/ammo/ammo.small.js"></script>
<script type="text/javascript" src="js/PhysicsUtil.js"></script>
<script type="text/javascript">

function fixMatrix(mesh) {
  bakeRotation(mesh);
  rotate180(mesh);
  bakeRotation(mesh);
}

function rotate180(mesh) {
  var m = new THREE.Matrix4();
  m.makeRotationY(Math.PI);
  mesh.matrix.multiplyMatrices(mesh.matrix,m);
  mesh.matrix.decompose( mesh.position, mesh.quaternion, mesh.scale );
}

function bakeRotation(mesh) {
  mesh.updateMatrixWorld();
  var geom = mesh.geometry;
  var rotMatrix = mesh.matrix.clone();
  rotMatrix.setPosition( new THREE.Vector3(0,0,0) );
  var pos = new THREE.Vector3();
  pos.setFromMatrixPosition(mesh.matrix);
  geom.applyMatrix(rotMatrix);
  mesh.matrix.identity();
  mesh.matrix.setPosition(pos);
  mesh.matrix.decompose( mesh.position, mesh.quaternion, mesh.scale );
  mesh.updateMatrixWorld();
}

var redCube;

function init() {  
  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 = new THREE.Scene();
  scene.matrixAutoUpdate = false;

var camera = new THREE.PerspectiveCamera(
      15,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );
  scene.add(camera);
  
  // Camera looks toward negative z with y up
  camera.position.set( 5, 5, 100 );
  
  var control = new THREE.OrbitControls(camera, canv);
  
  var light = new THREE.PointLight( 0xFFFFFF );
  light.position.set( 100, 0, 100 );
  scene.add( light );
  
  var lightAmb = new THREE.AmbientLight( 0x777777 );
  scene.add( lightAmb );
  
  var dynamicsWorld = PhysicsUtil.initPhysics();

var loader = new THREE.JSONLoader(  );
  var bug = new VWBug(scene,new THREE.Vector3(0,0,0),loader,dynamicsWorld);

redCube = new THREE.Mesh(
    new THREE.CubeGeometry( 1, 1, 1 ),
    new THREE.MeshLambertMaterial( { color: 0xFF0000, ambient: 0xFF0000 } )
  );
  redCube.position.set(10,0,0);
  scene.add( redCube );
  
  
  function onKeyDown(evt) {
    switch (evt.keyCode) {
      case 65: // 'a'
        bug.rotateLeft = true; break;
      case 68: // 'd'
        bug.rotateRight = true; break;
      case 87: // 'w'
        bug.moveAhead = true; break;
      case 83: // 's'
        bug.moveBackwards = true; break;
    }
  }
  
  function onKeyUp(evt) {
    switch (evt.keyCode) {
      case 65: // 'a'
        bug.rotateLeft = false; break;
      case 68: // 'd'
        bug.rotateRight = false; break;
      case 87: // 'w'
        bug.moveAhead = false; break;
      case 83: // 's'
        bug.moveBackwards = false; break;
    }
  }

window.addEventListener('keydown', onKeyDown, false);
  window.addEventListener('keyup', onKeyUp, false);
  
  var clock = new THREE.Clock();
  
  var animate = function() {
    var dt = clock.getDelta();
    control.update(dt);
    dynamicsWorld.stepSimulation(dt,1);
    bug.prerender(dt);
    renderer.render(scene,camera);
    requestAnimationFrame(animate);
  };

requestAnimationFrame(animate);
}
  
window.onload = init;
window.onresize = init;
</script>
</head>
<body><canvas style="width:100%;height:95%;border:1px gray solid;"></body>
</html>

kill visualization

1-2-threeexample 35: kill animation

1-2-three
example 35: kill animation