CGhw2 helper

2-link arm

by jmchen

HTML

<div id="info">Homework 2 Helper
  <br>
  <br> 2-link arm with joint
</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="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

CSS

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

#gui {
  position: absolute;
  top: 50px;
  right: 10px;
  height: 500px;
  //text-align: center;
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var gcontrols;   // for dat-GUI
var controls;    // for orbitControls
var pose1 = {
  angle1: Math.PI / 2,
  angle2: 0,
};

var poses = [];

init();
animate();

function makeLink() {
  var oneLink = new THREE.Object3D();
  var mesh = new THREE.Mesh(new THREE.BoxGeometry(15, 5, 5), new THREE.MeshBasicMaterial({
    wireframe: true
  }));
  oneLink.add(mesh);
  mesh.position.set(7.5, 0, 0);
  joint = new THREE.Mesh(new THREE.CylinderGeometry(3, 3, 3, 12),
    new THREE.MeshBasicMaterial({
      wireframe: true
    }));
  joint.rotation.x = Math.PI / 2;
  oneLink.add(joint);
  return oneLink;
}

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

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

  var gridXZ = new THREE.GridHelper(50, 10);
  gridXZ.setColors(new THREE.Color(0xff00ff), new THREE.Color(0xffffff));
  scene.add(gridXZ);

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

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

  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);
  ///////////////////////////////////////////////////////////////
  var oneLink = makeLink();
  link1 = oneLink.clone();
  link2 = oneLink.clone();

  scene.add(link1);
  link1.add(link2);
  link2.position.set(15, 0, 0);

  ////////////////////////////////////////////////////
  gcontrols = {
    angle1: 0.1,
    angle2: 0.1,
		pose: 0,
    savePose: function() {
			var pp = {angle1: gcontrols.angle1, angle2: gcontrols.angle2};
      poses.push (pp);
    }
  }


  var gui = new dat.GUI();
  gui.domElement.id = 'gui';

  gui.add(gcontrols, 'angle1', -0.2, 1.5);
  gui.add(gcontrols, 'angle2', -0.2, 1.5);
  gui.add(gcontrols, 'pose', 0, 5);
  gui.add(gcontrols, 'savePose');

  gui.close();
  // initially, closed
  //...