Hierarchy Study

2-link arm

by Rebecca Chen

HTML

<div id="info">Hierarchy Study
  <br>
  <br> 2-link arm
</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/dat.gui.min.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var controls;
var angle = 0;
var gcontrols; // for dat-gui
var sign = 1;

init();
animate();

function makeLink() {
  oneLink = new THREE.Object3D();
  var mesh = new THREE.Mesh(new THREE.BoxGeometry(15, 5, 5), new THREE.MeshNormalMaterial());
  oneLink.add(mesh);
  mesh.position.set(7.5, 0, 0);
  return oneLink;
}

function makeStick() {
  var stick = new THREE.Object3D();
  var bar = new THREE.Mesh(new THREE.CylinderGeometry(1, 1, 10), new THREE.MeshNormalMaterial());
  bar.position.y = 5;
  stick.add(bar);
  return stick;
}

function makeTorso ()
{
  var torso = new THREE.Object3D();
  var body = new THREE.Mesh(new THREE.CylinderGeometry(5, 5, 7), new THREE.MeshNormalMaterial());
  //bar.position.y = 5;
  torso.add(body);
  body.rotation.x = Math.PI/2;
  return torso;
}

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));
  gridXZ.rotation.x = Math.PI / 2;
  scene.add(gridXZ);

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

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

  //scene.add(link1);
  
  link1.add(link2);

  ///////////////////////////////
  gcontrol = {
    theta1: 0.01,
    theta2: 0.01,
  };

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

  gui.add(gcontrol, 'theta1', -1.5, 1.5);
  gui.add(gcontrol, 'theta2', -0.1, 2.35);

  /////////////////////////////////////
  
  var stick = makeStick();
 ...