keyframe interpolation

detailed example

by jmcjc5u

HTML

<div id="info">
  Keyframe animation (wave)
  <br>
</div>

<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

import * as THREE from 'https://cdn.skypack.dev/[email protected]';
import { OrbitControls } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js';

var scene, renderer, camera, controls;
var link1, link2;
//var theta1 = 0,  theta2 = 0;
/*
var keys = [
  [0, [Math.PI / 4, 0]],
  [0.5, [Math.PI * 2 / 3, Math.PI / 3]],
  [1, [Math.PI / 4, 0]]
];
*/
var T = 4;
var pose1 = {theta1: 0.73, theta2: 0.28}
var pose2p = {theta1: 1.74, theta2: 0.73}
var pose2 = {theta1: 1.84, theta2: 0.83}
var pose1p = {theta1: 0.83, theta2: 0.38}
//var keys = [ [0, pose1], [0.5, pose2], [1, pose1]];
var keys = [ [0, pose1], 
	[0.4, pose2p], [0.5, pose2p],
	[0.5, pose2], 
	[0.9, pose1p], [1, pose1p],
  [1, pose1]];

var gcontrols = {
  theta1: 0.1,
  theta2: 0.1
}

var clock = new THREE.Clock();
var ts = clock.getElapsedTime();
var intKey = [];
init();
animate();

////////////////////////////////////////////////////////////////
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": {}
  };
}

function init() {

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.y = 360;
  camera.position.z = 400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  document.body.appendChild(renderer.domElement);
  let controls = new OrbitControls(camera, renderer.domElement);

  var gridXZ = new THREE.GridHelper(200, 20, 'red',...