Inverse Kinematics using CCD

by ikatyang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<div class='top'>
  <a href='javascript:resetBallPosition()'>Reset Ball</a>
  <a href='javascript:inverseKinematics(arm, ball.position)'>Inverse Kinematics</a>
  <a href='javascript:animated = !animated'>Toggle</a>
</div>

CSS

.top {
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  text-align: center;
}
body {
  margin: 0;
  overflow: hidden;
}

JavaScript

var scene, camera, renderer;
var controls;
var arm, armHeight = 200, linkCount = 5, linkHeight = armHeight / linkCount, ball;
var animated = false, animatedAngle = 0, animatedHeight = 30;

init();
animate();

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 200, 200);

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

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var gridXZ = new THREE.GridHelper(100, 10);
  gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
  scene.add(gridXZ);
  
  ball = new THREE.Mesh(
  	new THREE.SphereGeometry(5, 32, 32),
    new THREE.MeshBasicMaterial({ color: 'black' }));
  resetBallPosition();
  scene.add(ball);
  
  arm = new THREE.Object3D();
  arm.links = [];
  scene.add(arm);
  var parent = arm;
  
  for (var i = 0; i < linkCount; i++) {
    var mesh = new THREE.Mesh(
      new THREE.CylinderGeometry(5, 5, linkHeight),
      new THREE.MeshNormalMaterial());
    mesh.position.y = mesh.geometry.parameters.height / 2;
    var link = new THREE.Object3D();
    link.add(mesh);
    if (parent !== arm) {
    	link.position.y = mesh.geometry.parameters.height;
    }
    parent.add(link);
    parent = link;
    arm.links.push(link);
  }

	window.addEventListener('resize', onWindowResize, false);
}

function resetBallPosition() {
	do {
  	ball.position.set(
      Math.random() * armHeight, 
      Math.random() * armHeight,
      Math.random() * armHeight);
  } while (ball.position.length() > armHeight);
}

function inverseKinematics(arm, position) {
  var linkEnd = arm.links[arm.links.length - 1];
  while (linkEnd.localToWorld(new THREE.Vector3(0, linkHeight, 0)).sub(position).length() > 1e-1) {
  	for (var i = arm.links.length - 1; i >= 0; i--) {
  ...