baseball runner

legs

by Alvin Chen

HTML

<div id="info">
  Walking
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/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>

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 Rlink1, Rlink2;
var linkArm1, linkArm2;
var RlinkArm1, RlinkArm2;
var torso;
var angle = 0;

var Ltheta1 = 0, Ltheta2 = 0;
var Rtheta1 = 0, Rtheta2 = 0;
var LtargetMesh, RtargetMesh;

var joints = []; // world pos of three joints
var axes = [];
var target = new THREE.Vector3();

var clock = new THREE.Clock();
var clock2 = new THREE.Clock();
var ts, T = 1;
var T2 = 1;
var dt = 0;
var intKey=[];
var ts2;
var keys = [
[0, [-0.1475, -0.10965, 1.0578, 1.72, 0.056435 ,0.027689,-1.620492,1.59]],// default
[0.25, [-0.1475, -0.10965,-1.48314, 1.72, 0.056435,0.027689,0.71443,1.59]],
[0.5, [-0.1475, -0.10965, 1.0578, 1.72, 0.056435 ,0.027689,-1.620492,1.59]],
[0.75, [-0.1475, -0.10965,-1.48314, 1.72, 0.056435,0.027689,0.71443,1.59]],// standby
[1, [-0.1475, -0.10965, 1.0578, 1.72, 0.056435 ,0.027689,-1.620492,1.59]],];

var Lkeys = [
[0,[-20.5,-33.5]], 
[0.125,[-23.3,-28.0]], 
[0.25,[-11.2,-31.7]], 
[0.375,[14.0,-36.3]], 
[0.5,[18.6,-37.3]], 
[0.625,[11.2,-35.4]], 
[0.75,[1.9,-35.4]], 
[0.875,[-8.4,-35.4]], 
[1,[-20.5,-33.5]]
];

var Rkeys = [
[0.,[18.6,-37.3]], 
[0.125,[11.2,-35.4]], 
[0.25,[1.9,-35.4]], 
[0.375,[-8.4,-35.4]], 
[0.5,[-20.5,-33.5]],
[0.625,[-23.3,-28.0]], 
[0.75,[-11.2,-31.7]], 
[0.875,[14.0,-36.3]], 
[1.0,[18.6,-37.3]]
];

init();
animate();

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

  var m = new THREE.Matrix4();
  m.makeTranslation (0,0,0);
  
  m.multiply(new THREE.Matrix4().makeRotationZ(-Math.PI/2 +theta[0]));
  m.multiply(new THREE.Matrix4().makeTranslation(20, 0, 0));
  var localzero = new THREE.Vector3(0, 0, 0);
  localzero.applyMatrix4(m);
  joints[1].copy(localzero);

  m.multiply(new THREE.Matrix4().makeRotationZ(theta[1]));
  m.multiply(new THREE.Matrix4().makeTranslation(22, 0, 0));
  localzero.set(0, 0, 0);
  localzero.applyMatrix4(m);
 ...