2-link arm

by 蔡 育曄

HTML

<div id = 'arm'>
  <input type=range min =-90 max =80 id = 'shoulder' value = 0>  Shoulder <br>
  <input type=range min =-90 max =0  id = 'elbow' value =0 > Elbow
</div>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

CSS

body {
  overflow: hidden;
}

#arm {
  position:absolute;
  top:10px;
  left:40%;
}

JavaScript

var randerer, camera, controls, scene, axes;
var shoulder, elbow;
var keyboard = new KeyboardState();
var theta1 = 0, theta2 = 0;
init();
animate();

function buildArm() {
	shoulder = new THREE.Object3D();
  elbow = new THREE.Object3D();
  var material = new THREE.MeshNormalMaterial();
  var upper_arm = new THREE.Mesh(new THREE.CylinderGeometry(4, 3,15,32), material);
  var foream = new THREE.Mesh(new THREE.CylinderGeometry(3, 2,12,32), material);
  var hand = new THREE.Mesh(new THREE.SphereGeometry(3,32,32), material)
  upper_arm.rotation.z = Math.PI/2
	upper_arm.position.x = 7.5;
  foream.rotation.z = Math.PI/2
  foream.position.x =6
  hand.position.x = 14.5;
  elbow.add(foream);
  elbow.add(hand);
  elbow.position.x = 15;
  shoulder.add(upper_arm);
  shoulder.add(elbow);
  return shoulder;
}

function init() {
	renderer = new THREE.WebGLRenderer ({
  	antialias: true
  });
  renderer.setSize(window.innerWidth,window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);
  
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 200;
  
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  scene = new THREE.Scene();
  var gridXZ = new THREE.GridHelper(100, 10 ,'red', 'white');
  scene.add(gridXZ);
  
  scene.add(buildArm());
  
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
	controls.update(); 
  keyboard.update();
  
  if (keyboard.pressed ('Q')&& theta1>= -90) {
    	$('#shoulder').val(theta1-=1);
      console.log($('#shoulder').val());
  } else if (keyboard.pressed ('A')&& theta1<=80) {
    	$('#shoulder').val(theta1+=1);
       console.log($('#shoulder').val());
  } else if (keyboard.pressed ('W')&& theta2 >= -90) {
   ...