homeork 05

robot

by joe chan

HTML

<div id="info">
WORLD ORDER</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/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>

CSS

#info {
  position: absolute;
  top: 3%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}
#gui {
    position: absolute;
    top: 40px;
    left: 20px;
    height: 350px;
}

JavaScript

var camera, scene, renderer, light, controls;
var body, upperArmL, upperArmR, foreArmL, foreArmR;
var legL, legR, forlegL, forlegL;
var angle = 0;
var gcontrols;
var speed=0;

var keys = [
[0, [-.157, -.05, -.39, -1.68, 0]],
[0.3, [-1.038, -1.15, 0.02, -2.01, -0.48]],
[0.5, [0.453, 0.84, -2.38, -0.55, 0.25]],
[0.75, [0.453, 0.84, -2.38, -0.55, 0.25]],
[0.85, [-.157, -.05, -.39, -1.68, 0]],
[1, [-.157, -.05, -.39, -1.68, 0]],
];
var T = 2;
var clock = new THREE.Clock();
var ts = clock.getElapsedTime();
var intKey=[];

init();
animate();

function oneLink() {

  var arm = new THREE.Object3D();
  var mesh = new THREE.Mesh(new THREE.BoxGeometry(20, 5, 5),
    new THREE.MeshNormalMaterial());
  mesh.position.set(10, 2.5, 0);
  arm.add(mesh);

  return arm;
}

function legoneLink() {

  var leg = new THREE.Object3D();
  var mesh = new THREE.Mesh(new THREE.BoxGeometry(30, 8, 8),
    new THREE.MeshNormalMaterial());
  mesh.position.set(10, 2.5, 0);
  leg.add(mesh);

  return leg;
}

function flegoneLink() {

  var fleg = new THREE.Object3D();
  var mesh = new THREE.Mesh(new THREE.BoxGeometry(30, 6, 6),
    new THREE.MeshNormalMaterial());
  mesh.position.set(10, 2.5, 0);
  fleg.add(mesh);

  return fleg;
}

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

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 200;
  camera.position.y = 200;
  scene.add(camera);

  light = new THREE.PointLight(0xffffff);
  light.position.set(100, 300, 200);
  scene.add(light);

  var gridXZ = new THREE.GridHelper(100, 10);
  gridXZ.setColors(new THREE.Color(0xff1111), new THREE.Color(0xffffff));
  scene.add(gridXZ);
  
	window.addEventListener('resize', onWindowResize, false);

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

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

 ...