hw4 helper

by jason870509

HTML

<div id="info">demo page
  <br/>Press Z to toggle
  <p id='velprint'>
  </p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://jyunming-chen.github.io/game3js/js/ccdsys.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

class TwoLinkArm {
	constructor () {
  	this.theta1 = 0;
    this.theta2 = 0;
  }
  init () {
  let twoLink = new THREE.Object3D();
  
 	let mat = new THREE.MeshNormalMaterial()
	this.link1 = new THREE.Object3D();
  this.link1.add (new THREE.AxisHelper (10))
  let mesh = new THREE.Mesh (new THREE.BoxGeometry (10,3,5), mat)
  this.link1.add (mesh);
  mesh.position.x = 5

twoLink.add (this.link1)
	
  this.link2 = new THREE.Object3D();
  this.link2.add (new THREE.AxisHelper (10))
  let mesh2 = new THREE.Mesh (new THREE.BoxGeometry (10,3,5), mat)
  this.link2.add (mesh2);
  mesh2.position.x = 5
  
  this.link1.add (this.link2)
  this.link2.position.x = 10
  
  let paddle = new THREE.Mesh (new THREE.CylinderGeometry (5,5,4), mat)
  this.link2.add (paddle)
  paddle.position.x = 10
 	
  return twoLink;
  
  }
  update (thetas) {
  	this.theta1 = thetas[0]
    this.theta2 = thetas[1]
    this.link1.rotation.y = this.theta1
  	this.link2.rotation.y = this.theta2
  }
}
var camera, scene, renderer;
//var link1, link2, theta1, theta2;
//var ccdSys;
//var target;
var twoLinkArm, twoLink;
var twoLinkArm2, twoLink2;

var raycaster;
var mouse = new THREE.Vector2();
var pickables = [];

var clock = new THREE.Clock();
var paddlePos = new THREE.Vector3();

init();
animate();

function fk (thetas, joints) {  // all memory assumed in place
  joints[0].set (0,0,0);
  
  var localzero = new THREE.Vector3(0, 0, 0);
  var m = new THREE.Matrix4();
  m.makeRotationY(thetas[0]);
  m.multiply(new THREE.Matrix4().makeTranslation(10, 0, 0));
  localzero.applyMatrix4(m);
  joints[1].copy(localzero);

  localzero.set(0, 0, 0);
  m.multiply(new THREE.Matrix4().makeRotationY(thetas[1]));
  m.multiply(new THREE.Matrix4().makeTranslation(10, 0, 0));
  localzero.applyMatrix4(m);
  joints[2].copy(localzero);
}

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

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

  light = new...