3-link arm (JI)

by Rebecca Chen

HTML

<div id="info">Three-Link Arm
<br>Jacobian inverse
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">


</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var satellite, angle = 0;
var mouse = new THREE.Vector2();
var q = [Math.PI / 6, -Math.PI / 6, Math.PI / 3];
var b0, b1, b2, b3;
var link1, link2, link3;
var j1, j2, j3;
var target = [10, 8, 0];

init();
animate();

function makeLink(r, h) {
  var tmp = new THREE.Object3D();
  var mesh = new THREE.Mesh(new THREE.CylinderGeometry(r, r, h),
    new THREE.MeshNormalMaterial());
  mesh.position.set(0, h / 2, 0);
  var tmp = new THREE.Object3D();
  tmp.add(mesh);
  var link = new THREE.Object3D();
  tmp.rotation.z = -Math.PI / 2;
  link.add(tmp);
  return link;
}

function init() {

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera(-20, 20, 20, -20, -10, 100);
  camera.position.z = 50;
  scene.add(camera);
  var axisHelper = new THREE.AxisHelper(5);
  scene.add(axisHelper);

  window.addEventListener('resize', onWindowResize, false);
  window.addEventListener('mousedown', onDocumentMouseDown, false);

	///////////////////////////////////
  link1 = makeLink(0.5, 5);
  link2 = makeLink(0.5, 3);
  link3 = makeLink(0.5, 6);

  link1.add(link2);
  link2.add(link3);
  scene.add(link1);

  jointPos = new THREE.Mesh(new THREE.SphereGeometry(0.8), new THREE.MeshNormalMaterial());
  b0 = jointPos.clone();
  b1 = jointPos.clone();
  b2 = jointPos.clone();
  b3 = jointPos.clone();
  scene.add(b0);
  scene.add(b1);
  scene.add(b2);
  scene.add(b3);

  link1.rotation.z = q[0];
  link2.position.set(5, 0, 0);
  link2.rotation.z = q[1];
  link3.position.set(3, 0, 0);
  link3.rotation.z = q[2];

  fk(q, [b0.position, b1.position, b2.position, b3.position]);

  j1 = new THREE.Vector3();
  j2 = new THREE.Vector3();
  j3 = new THREE.Vector3();

	// for initial configuration
	iksolver();
  
}

function onWindowResize() {
 ...