CCD (ccdbox)

detailed example

by joe chan

HTML

<div id="info">
  IK of Two-Link Arm
  <br>
  <br> ( generic CCD Solver )
</div>

<script src="https://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://rawgit.com/jyunming-chen/game3js/master/js/ccdbox.js"></script>

CSS

body {
	  background-color: #fff;
	  color: #111;
	  margin: 0px;
	  overflow: hidden;
	  font-family: Monospace;
	  font-size: 20px;
	}
	
	#info {
	  position: absolute;
	  top: 0px;
	  width: 100%;
	  padding: 5px;
	  text-align: center;
	  color: #ffff00
	}
	
	a {
	  color: #00ffff
	}
	
	strong {
	  color: red
	}
	
	#container {
	  z-index: 0;
	  left: 0px;
	  top: 0px;
	  overflow: hidden;
	  position: absolute;
	  width: 100%;
	  height: 100%;
	}

JavaScript

var scene, renderer, camera, controls;
var link1, link2;

var theta1 = 0,
  theta2 = 0;
var joints = []; // world pos of three joints
var target = new THREE.Vector3();
var axes = [];
var xx = 0; sign = 1;

init();
animate();

////////////////////////////////////////////////////////
// forward kinematics
function fk(theta, joints) {
  joints[0] = new THREE.Vector3(0, 0, 0);

  var m = new THREE.Matrix4();
  m.makeRotationY(theta[0]);
  m.multiply(new THREE.Matrix4().makeTranslation(60, 0, 0));
  var localzero = new THREE.Vector3(0, 0, 0);
  localzero.applyMatrix4(m);
  joints[1].copy(localzero);

  m.multiply(new THREE.Matrix4().makeRotationY(theta[1]));
  m.multiply(new THREE.Matrix4().makeTranslation(90, 0, 0));
  localzero.set(0, 0, 0);
  localzero.applyMatrix4(m);
  joints[2].copy(localzero);
}

/////////////////////////////////////////////////////////////
// joint axis setup
//
function setarm() {
  var axis = new CCD_axis(new THREE.Vector3(0, 0, 1), 0);
  axes.push(axis);
  var axis = new CCD_axis(new THREE.Vector3(0, 0, 1), 1);
  axis.limits = new THREE.Vector2(-3.1, -0.01);
  axes.push(axis);
}


////////////////////////////////////////////////////////////////
function init() {

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

	scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.y = 160;
  camera.position.z = 400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  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);

  //////////////////////////////////////////////////
	link1 = makeLink(60);
  scene.add (link1);
	link2 = makeLink(90);
  link1.add (link2);
 ...