three.js testbed

with orbitControls, XZgrid, info

by Bai Shiuan Huang

HTML

<div id="info">3 DOF arm
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/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

var camera, scene, renderer;
var threeDOF, hand;

class ThreeDOF {
	constructor () {
  	this.theta1 = 0;
    this.theta2 = 0;
    this.theta3 = 0;
  }
  init() {
  let base = new THREE.Object3D();
  base.add (new THREE.AxisHelper(20))
  //scene.add (base)
  //32b5f2
  let material = new THREE.MeshPhongMaterial({color:0x444849})
  let material1 = new THREE.MeshPhongMaterial({color:0xbf8b09})
  let cylinder0 = new THREE.Mesh (new THREE.CylinderGeometry(15,15,5),material)
  base.add (cylinder0)
  cylinder0.position.set (0,2.5,0)
  let cylinder1 = new THREE.Mesh (new THREE.CylinderGeometry(8,8,40),material)
  base.add (cylinder1)
  cylinder1.position.set (0,20,0)
  
  this.motor1 = new THREE.Object3D();
  this.motor1.add (new THREE.AxisHelper(20))
  let wrap = new THREE.Object3D();
  this.motor1.add (wrap)
  let body = new THREE.Mesh (new THREE.CylinderGeometry(8,8,30), material1)
  wrap.add (body)
  body.position.set (0,5,0)
  wrap.rotation.z = -Math.PI/2
  
  this.link1 = new THREE.Object3D();
  this.link1.add (new THREE.AxisHelper(20))
  
  body = makeArm(8,12, 30, 10)
  this.link1.add (body)
  body.position.y =30
  
  this.link2 = new THREE.Object3D();
 
  this.link2.add (new THREE.AxisHelper(20))
  body = makeArm(6, 8, 26, 10);
  this.link2.add (body)
  body.position.y = 26
  
  base.add (this.motor1)
  this.motor1.add (this.link1)
  this.link1.add (this.link2)
  this.motor1.position.y = 46
  this.link1.position.x = 20
  this.link2.position.set (-10, 30, 0)
 	
  return base;
  
  }
  update (thetas) {
  	this.theta1 = thetas[0];
    this.theta2 = thetas[1];
    this.theta3 = thetas[2];
    this.motor1.rotation.y = this.theta1;
    this.link1.rotation.x = this.theta2;
  	this.link2.rotation.x = this.theta3;
    
  }
}

function fk(thetas, joints) {
  joints[0].set (0,0,0)
  var localzero = new THREE.Vector3(0, 0, 0);
  var m = new THREE.Matrix4();
  m.multiply(new THREE.Matrix4().makeTranslation(0, 46, 0));
  m.multiply(new...