CCD (ccdbox)

detailed example

by Millieyan

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/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<!--script src="https://rawgit.com/jyunming-chen/game3js/master/js/ccdbox.js"></script-->
<!--script src="https://cdn.jsdelivr.net/gh/jyunming-chen/game3js@13a05103eb51d913dd7815939bf7ad45690e8dc9/js/ccdbox.js"></script-->
<script src="https://jyunming-chen.github.io/game3js/js/ccdsys.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;
var ccdSys;
var zz = 0, sign = 1;
var puck
var raycaster;
var mouse = new THREE.Vector2();
var pickables = [];
var target;

init();
animate();

////////////////////////////////////////////////////////
// forward kinematics
function fk (theta, joints) {  // all memory assumed in place
  joints[0].set (0,0,0);
  
  var localzero = new THREE.Vector3(0, 0, 0);
  var m = new THREE.Matrix4();
  m.makeRotationY(theta[0]);
  m.multiply(new THREE.Matrix4().makeTranslation(60, 0, 0));
  localzero.applyMatrix4(m);
  joints[1].copy(localzero);

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


////////////////////////////////////////////////////////////////
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);
  let controls = new THREE.OrbitControls(camera, renderer.domElement);

  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);
  window.addEventListener('resize', onWindowResize, false);

  /////////////////////////////////////////////////////////////////////
  planeb = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshBasicMaterial({
    transparent: true,
    opacity: 0.5,
    visible: true
  }));
 scene.add(planeb);
  planeb.rotation.x = -Math.PI / 2;
 pickables = [planeb];

  puck = new THREE.Mesh(new THREE.PlaneGeometry(25,5), new THREE.MeshNormalMaterial());
scene.add(puck);

  raycaster = new THREE.Raycaster();
 ...