Tweening & Easing

2-link arm

by otorineko6790

HTML

<div id="info">Tweening & Easing
  <br>
  <br> 2-link 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://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 gcontrols; // for dat-gui
var clock = new THREE.Clock();
var ts = clock.getElapsedTime();
var intKey = [];

var keys = [
  [0, [0.32, 0.22]],
  [0.5, [2.05, 1.22]],
  [1, [0.32, 0.22]],
];

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 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, 'purple', 'white');
  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);
  let controls = new THREE.OrbitControls(camera, renderer.domElement); ///////////////////////////////////////////////////////////////
  var oneLink = makeLink();
  link1 = oneLink.clone();
  link2 = oneLink.clone();

  scene.add(link1);
  link1.add(link2);
  link2.position.set(15, 0, 0);

  ///////////////////////////////
  gcontrol = {
    T: 2,
    type: "linear"
  };

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

  gui.add(gcontrol, 'T', 0.5, 5.5);
  gui.add(gcontrol, 'type', ["linear", "easeInQuad"]);

  /////////////////////////////////////

}

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

function keyframe(t) {
  var s = ((t - ts) % gcontrol.T) / gcontrol.T;

  for (var i = 1; i < keys.length; i++) {
    if (keys[i][0] > s) break;
  }
  // take i-1
  var ii = i - 1;
  var a = (s - keys[ii][0]) / (keys[ii +...