biped

with orbitControls, XZgrid, info

by Millieyan

HTML

<div id="info">WALKING
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/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: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

class biped {
  constructor() {
    this.theta1 = 0.31;
    this.theta2 = 0.6;
  }
  init() {
    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)
    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)
    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)
    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(thetas) {
    this.theta1 = thetas[0]
    this.theta2 = thetas[1]

    this.thigh.rotation.z = this.theta1;
    this.leg.rotation.z = this.theta2;
  }

}


var camera, scene, renderer;
const LS = 4.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 = 5.0
var body, theta1, theta2;
var legL, legR;
var clock = new THREE.Clock();
var clock2 = new THREE.Clock();
var clock3 = new THREE.Clock();
var target2, totala, alla = 0,
  period = 1,
  totalb = 5,
  allb = 0,
  target3, period = 1;
var flag = true;
var feetclock, feetclock2;
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, -L2, 0));
  localzero.applyMatrix4(m);
  joints[1].copy(localzero);

  localzero.set(0, 0, 0);
  m.multiply(new THREE.Matrix4().makeRotationZ(thetas[1]));
  m.multiply(new THREE.Matrix4().makeTranslation(0, -L1, 0));
  localzero.applyMatrix4(m);
  joints[2].copy(localzero);
}


function init() {
  scene = new...