three.js testbed

with orbitControls, XZgrid, info

by 蔡 育曄

HTML

<div id="info">3 DOF arm
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/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 threeDOF = {
  theta0: 0,
	theta1: 0,
  theta2: 0,
  target: new THREE.Vector3(),

	init: function() {

  let base = new THREE.Object3D();
  base.add (new THREE.AxisHelper(20))

	let material = new THREE.MeshNormalMaterial()
  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), material)
  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 = new THREE.Mesh (new THREE.BoxGeometry(10,50,20), material)
  this.link1.add (body)
  body.position.y =12

	this.link2 = new THREE.Object3D();
 
  this.link2.add (new THREE.AxisHelper(20))
  body = new THREE.Mesh (new THREE.BoxGeometry(10,40,20), material)
  this.link2.add (body)
  body.position.y =8

  base.add (this.motor1)
  this.motor1.position.y = 46
  this.motor1.add (this.link1)
  this.link1.position.x = 20
  this.link1.add (this.link2)
  this.link2.position.set (-10, 30, 0)
	return base
/*
    let body = new THREE.Object3D();

    this.torso = new THREE.Mesh(new THREE.BoxGeometry(50, 100, 30), new THREE.MeshNormalMaterial());
    this.torso.position.set(0, 50, 0);
    body.add(this.torso);

    let arm, boxGeometry;
    this.upperArm = new THREE.Object3D();
    boxGeometry = new THREE.BoxGeometry(10, 40, 10);
    arm = new THREE.Mesh(boxGeometry, new THREE.MeshNormalMaterial());
    this.upperArm.add(arm);
    arm.position.set(-5, -20, 0);
    body.add(this.upperArm);
    this.upperArm.position.set(-25, 100, 0);

    this.lowerArm = new THREE.Object3D();
    boxGeometry = new...