Animated Legs

by ikatyang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
<script src="https://cdn.rawgit.com/ikatyang/dat.GUI.animate/master/dat.gui.animate.min.js"></script>
<div class='top'>
  <a href='javascript:animated = !animated'>Toggle</a>
</div>

CSS

.top {
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  text-align: center;
}
body {
  margin: 0;
  overflow: hidden;
}

JavaScript

var scene, camera, renderer;
var controls;
var gui, clock = new THREE.Clock();
var animated = false;

init();
animate();

function init() {
	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
	camera.position.set(0, 200, 200);

	renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setClearColor(0x888888);
	document.body.appendChild(renderer.domElement);

	controls = new THREE.OrbitControls(camera, renderer.domElement);

	var gridXZ = new THREE.GridHelper(100, 10);
	gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
	scene.add(gridXZ);
  
  var cylinder = new THREE.Mesh(
  	new THREE.CylinderGeometry(30, 30, 10),
    new THREE.MeshNormalMaterial());
  cylinder.position.set(0, 67.5, 0);
  scene.add(cylinder);
  
  var llegLink1 = new THREE.Object3D();
  var mesh = new THREE.Mesh(
  	new THREE.CylinderGeometry(10, 5, 30),
    new THREE.MeshNormalMaterial());
  mesh.position.set(0, -15, 0);
  llegLink1.add(mesh);
  llegLink1.position.set(-15, -5, 0);
  cylinder.add(llegLink1);
  
  var llegLink2 = new THREE.Object3D();
  var mesh = new THREE.Mesh(
  	new THREE.CylinderGeometry(10, 5, 30),
    new THREE.MeshNormalMaterial());
  mesh.position.set(0, -15, 0);
  llegLink2.add(mesh);
  llegLink2.position.set(0, -30, 0);
  llegLink1.add(llegLink2);
  
  var llegLink3 = new THREE.Object3D();
  var mesh = new THREE.Mesh(
  	new THREE.BoxGeometry(10, 5, 20),
    new THREE.MeshNormalMaterial());
  mesh.position.set(0, -10, 0);
  llegLink3.add(mesh);
  llegLink3.position.set(0, -20, 10);
  llegLink2.add(llegLink3);
  
  var rlegLink1 = new THREE.Object3D();
  var mesh = new THREE.Mesh(
  	new THREE.CylinderGeometry(10, 5, 30),
    new THREE.MeshNormalMaterial());
  mesh.position.set(0, -15, 0);
  rlegLink1.add(mesh);
  rlegLink1.position.set(+15, -5, 0);
  cylinder.add(rlegLink1);
  
  var rlegLink2 = new THREE.Object3D();
  var mesh =...