keyframe interpolation

detailed example

by RGMGx

HTML

<div id="info">
  hw3 character dance <br>

  <button id="toggle" style="width:20%" onclick="audio.play()" onclick="audio.pause()">BGM_PLAY</button><br>
  </div>
  <audio id="soundtrack" autoplay loop style="display:none">
<source src="https://rgmgx.github.io/sounds/bgm_maoudamashii_8bit26.mp3"  type='audio/mp3'>
</audio>




<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://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>

CSS

body {
	  background-color: #fff;
	  color: #111;
	  margin: 0px;
	  overflow: hidden;
	  font-family: Monospace;
	  font-size: 20px;
	}

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

	a {
	  color: #00ffff
	}

	strong {
	  color: red
	}

	#container {
	  z-index: 0;
	  left: 0px;
	  top: 0px;
	  overflow: hidden;
	  position: absolute;
	  width: 100%;
	  height: 100%;
	}

	#gui {
	  position: absolute; //top: 40px;
	  left: 20px;
	  height: 350px;
	}

JavaScript

var scene, renderer, camera, controls;
var blue, body1
var theta = 0
///////////////////////////////////////////////////
var turn = true
$("#toggle").click(function() {
  turn = !turn;
});
///////////////////////////////////
var T = 4;
var pose1 = {
  theta1: 0.1,
  theta2: 0.9
}
var pose2p = {
  theta1: -1.0,
  theta2: 0.5
}
var pose2 = {
  theta1: 0.9,
  theta2: 0.4
}
var pose1p = {
  theta1: -1.0,
  theta2: 0.1
}
var pose3 = {
  theta1: 0.1,
  theta2: 0.1
}

var keys = [
  [0, pose1],
  [0.4, pose2p],
  [0.6, pose2],
  [0.8, pose1p],
  [0.9, pose3],
  [1, pose1]

];
/*
var gcontrols = {
  theta1: 0.1,
  theta2: 0.1
}
*/
var clock = new THREE.Clock();
var ts = clock.getElapsedTime();
var intKey = [];
//////////////////////////////////////
function loadJSON() {
  return {
    "preset": "pose2",
    "remembered": {
      "Default": {
        "0": {
          "theta1": 0.1,
          "theta2": 0.1
        }
      },
      "pose1": {
        "0": {
          "theta1": 0.7283234362993365,
          "theta2": 0.277456547161652
        }
      },
      "pose2": {
        "0": {
          "theta1": 1.8381496249459446,
          "theta2": 0.832369641484956
        }
      }
    },
    "closed": false,
    "folders": {}
  };
}

/////////////////////////////////////////////
class MakeBody {
  constructor() {
    this.theta1 = 0.1;
    this.theta2 = 0.1;
  }
  init(len) {
    let twoLink = new THREE.Object3D();
    let mat = new THREE.MeshPhongMaterial({
      color: 0x000000
    })
    this.link1 = new THREE.Object3D();
    //  this.link1.add(new THREE.AxisHelper(10))
    let mesh = new THREE.Mesh(new THREE.BoxGeometry(len, 3, 3), mat)
    this.link1.add(mesh);
    mesh.position.x = len / 2
    twoLink.add(this.link1)
    this.link2 = new THREE.Object3D();

    let mesh2 = new THREE.Mesh(new THREE.BoxGeometry(len, 3, 3), mat)
    mesh2.position.x = len / 2
    this.link2.add(mesh2);
    //this.link2.add(new THREE.AxisHelper(10))
    this.link1.add(this.link2)
   ...