walkman

by Leoooo

HTML

<div id="info">hw4
<br>
  <button id="toggle" style="width:20%">walk</button>
</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/mrdoob/three.js/dev/examples/js/Gyroscope.js"></script>
<script src="https://jyunming-chen.github.io/game3js/js/ccdsys.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var walk=true;
class Standleg {
	constructor () {
  	this.theta1 = 0.31;
    this.theta2 = 0.63;
  }
  init () 
  {
  
	let body = new THREE.Object3D();
  this.thigh = new THREE.Object3D();
  let thighMesh = new THREE.Mesh (new THREE.BoxGeometry(1, 5.2, 1), mat)
  thighMesh.castShadow = true;
  thighMesh.receiveShadow = true;
  this.thigh.add (thighMesh)
  thighMesh.position.y = -5.2/2
  
  this.leg = new THREE.Object3D()
  let legMesh = new THREE.Mesh (new THREE.BoxGeometry(1, 4.8, 1), mat)
   legMesh.castShadow = true;
  legMesh.receiveShadow = true;
  this.leg.add (legMesh)
  legMesh.position.y = -4.8/2
  this.leg.position.y = -5.2
  
  this.torso1 = new THREE.Object3D();
  let torsoMesh = new THREE.Mesh (new THREE.BoxGeometry(1, 3.3, 1), mat)
  torsoMesh.castShadow = true;
  torsoMesh.receiveShadow = true;
  this.torso1.add (torsoMesh)
  torsoMesh.position.y = 3.3/2
  
  body.add (this.torso1)
  body.add (this.thigh)
  this.thigh.add (this.leg)
  return body;
  
  }
  update (thetas) {
  	this.theta1 = thetas[0]
    this.theta2 = thetas[1]
    this.thigh.rotation.z = this.theta1
  	this.leg.rotation.z = this.theta2
    //console.log(this.theata1)
  }
}



var camera, scene, renderer;
var clock = new THREE.Clock();
var clock2 = new THREE.Clock();
var clock3 = new THREE.Clock();
var theta0, theta1, theta2
const LS = 5.3
const L2 = 5.2
const L1 = 4.8
const Lh = 3.3
const Hh = 8.3
const Hr=0.6
var mat = new THREE.MeshPhongMaterial();
var thetaGroin, thetaKnee;
var standleg,legA,legB,torso;
var raycaster;
var mouse = new THREE.Vector2();
var pickables = [],puck;
var feet1,feet2;
var dlhelper, dlshelper,light2;
init();
animate();



function fk (thetas, 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.makeRotationZ(thetas[0]);
  m.multiply(new THREE.Matrix4().makeTranslation(0, -5.2, 0));
  localzero.applyMatrix4(m);
  joints[1].copy(localzero);

  localzero.set(0,...