articulation

Demonstrates the loading and animation of an articulated (jointed) model. WASD moves the chassis of the tank, and IJKL rotates the turret and elevates the barrel. Look elsewhere on this site for advice on the proper export of multipart models like this one from Blender.

1-2-three
example 38: articulation

<!DOCTYPE html>
<html>
<head>
<title>hovertank</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript" src="js/TweakedOrbitControls.js"></script>

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 xUnit = new THREE.Vector3(1,0,0);
var yUnit = new THREE.Vector3(0,1,0);
var zUnit = new THREE.Vector3(0,0,1);
var yUnitNeg = new THREE.Vector3(0,-1,0);
var colliders = [];

function Hovertank(scene,loc,loader) {
  this.translationSpeed = 0.0;
  this.rotationSpeed = 0.0;
  this.traverseSpeed = 0.0;
  this.elevateSpeed = 0.0;
  this.fireGun = false;
  this.flashOn = false;
  this.timeDoneFiring = null;
  var that = this;

var onScene = function(scn) {
  var mesh = scn.getObjectByName("Bug");
    that.chassisMesh = scn.getObjectByName("Chassis");
    fixMatrix(that.chassisMesh);
    scene.add(that.chassisMesh);
    that.turretMesh = scn.getObjectByName("Turret");
    fixMatrix(that.turretMesh);
    that.chassisMesh.add(that.turretMesh);
    that.barrelMesh = scn.getObjectByName("Barrel");
    fixMatrix(that.barrelMesh);
    that.barrelMesh.position.sub(that.turretMesh.position);
    that.turretMesh.add(that.barrelMesh);
  };
  loader.load("models/hovertank/hovertank20.json", onScene);
  
  this.quat = new THREE.Quaternion(); // scratch

this.update = function(dt, now) {
  
    if (!this.barrelMesh)  return;
    
    var dTheta = dt * this.rotationSpeed;
    this.quat.setFromAxisAngle(yUnit,dTheta);
    this.chassisMesh.quaternion.multiply(this.quat);
    var dZ = dt * this.translationSpeed;
    this.chassisMesh.translateZ(dZ);
    
    dTheta = dt * this.traverseSpeed;
    this.quat.setFromAxisAngle(yUnit,dTheta);
    this.turretMesh.quaternion.multiply(this.quat);
    
    dTheta = dt * this.elevateSpeed;
    this.quat.setFromAxisAngle(xUnit,dTheta);
    this.barrelMesh.quaternion.multiply(this.quat);
    
  };
}

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

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

var scene = new THREE.Scene();

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,mycanvas);

var light = new THREE.PointLight( 0xFFFFBB );
  light.position.set( 10, 100, 10 );
  scene.add( light );
  
  var ambient = new THREE.AmbientLight( 0x999999 );
  scene.add( ambient );

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

articulation

1-2-threeexample 38: articulation

1-2-three
example 38: articulation