IK

by omgazero

HTML

<div id="info">
  hw4
  <br><button id="Walk" style="width:20%">Start walk</button> 
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/Gyroscope.js"></script>
<script src="https://jyunming-chen.github.io/game3js/js/ccdsys.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

CSS

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


body {
  overflow: hidden;
}

JavaScript

var  scene, light, camera, renderer, controls;
var punk_right, punkpos_right = new THREE.Vector3();
var punk_left, punkpos_left = new THREE.Vector3();
var clock = new THREE.Clock();
var keyboard = new KeyboardState();
var body, rightLeg, leftLeg, isWalk = false,isTurning = false, angle = 0,  oldPosZ = 0, oldPosY = 0, status = 2;
var start = 15, hill1 = -17, plane2 = -43, hill2 = -70, plane3 = -97, end = -120, turn = -1;


const LS = 5.3;
const L2 = 5.2;
const L1 = 4.8;
const Lh = 3.3;
const Hh = 8.3;
const Hr = 0.6;
const Fc = 1.0;
const Ts = 1.0;

$('#Walk').click ( function() {
	isWalk = !isWalk;
	if (isWalk) { 
  	
  	clock.start();
		$('#Walk').text ('Stop Walk')
	} else {
	  oldPosZ = body.position.z;
		$('#Walk').text ('Start Walk')
	}
});
////////////////////
var biped_right = {
	thetaGroin: 0.31,
  thetaKnee: -0.6, 
  target: new THREE.Vector3(0, Hh, LS/2),
  
  init: function() {
		let body = new THREE.Object3D();
		let mat = new THREE.MeshNormalMaterial();
  
  	this.thigh = new THREE.Object3D();
  	let thighMesh = new THREE.Mesh (new THREE.BoxGeometry(1, L2, 1), mat);
    thighMesh.castShadow = true;
  	this.thigh.add (thighMesh);
  	thighMesh.position.y = -L2/2;
  
  	this.leg = new THREE.Object3D();
  	let legMesh = new THREE.Mesh (new THREE.BoxGeometry(1, L1, 1), mat);
    legMesh.castShadow = true;
  	this.leg.add (legMesh);
  	legMesh.position.y = -L1/2;
  	this.leg.position.y = -L2;
  
  	this.torso = new THREE.Object3D();
  	let torsoMesh = new THREE.Mesh (new THREE.BoxGeometry(1, Lh, 1), mat);
    torsoMesh.castShadow = true;
  	this.torso.add (torsoMesh);
  	torsoMesh.position.y = Lh/2;
  
  	body.add (this.torso);
  	body.add (this.thigh);
  	this.thigh.add (this.leg);
  	return body;
	},
  
  update: function (thetas) {
 // console.log (thetas);
  	this.thetaGroin = thetas[0];
    this.thetaKnee = thetas[1];
  
    this.thigh.rotation.x = this.thetaGroin;
    this.leg.rotation.x = this.thetaKnee;  
  }


}
var biped_left  = jQuery.extend({},...