keyframe interpolation

detailed example

by jason870509

HTML

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

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%;
	}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/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 = 2;
var clock = new THREE.Clock();
var ts = clock.getElapsedTime();
var intKey = [];

init();
animate();

////////////////////////////////////////////////////////////////
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', 'white');
  scene.add(gridXZ);

  //////////////////////////////////////////////////
  link1 = makeLink(60);
  scene.add(link1);
  link2 = makeLink(90);
  link1.add(link2);
  link2.position.set(60, 0, 0);

  // base
  var cyl_geom = new THREE.CylinderGeometry(10, 10, 6, 32);
  var cyl_mat = new THREE.MeshBasicMaterial({
    color: 0xff2211
  });
  var base = new THREE.Mesh(cyl_geom, cyl_mat);
  scene.add(base);

  window.addEventListener('resize', onWindowResize, false);
}

function makeLink(length) {
  var oneLink = new THREE.Object3D();
  var mesh = new THREE.Mesh(new THREE.BoxGeometry(length, 10, 10), new THREE.MeshNormalMaterial());
  oneLink.add(mesh);
  mesh.position.set(length / 2, 0, 0);
  return oneLink;
}

function onWindowResize() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
 ...