Rhythmic Nodding

nodding style

by jmchen

HTML

<div id="info">Nodding ... <br/>
<a href="javascript:setKey(1);">with style</a>, 
<a href="javascript:setKey(0);">without style</a>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

// nodding, with style
// imitating robot (mechanical, popping) dance style
var camera, scene, renderer, geometry, material, mesh, light, controls;
var clock = new THREE.Clock();

var stick = new THREE.Object3D();
var quats, keys;
var actionStart;
var period = .7; // 1 beat = 0.7 seconds


init();
animate();

function setKey (which) {
  if (which === 0)
    setKeys0();
  else
    setKeys1();
}

// keys & euler angles
//
// interpolate using quaternion
function setKeys0() {
  //////////////////////////////////////////////////////////////
  // Euler orientations
  var euler0 = new THREE.Euler(0, 0, 0);     // start
  var euler05 = new THREE.Euler(.3, 0, 0);   
  var euler1 = new THREE.Euler(0.0, 0, 0);  // end of period

  keys = [];
  quats = [];
  // set keys & quats
  keys.push(0, 0.5, 1);  // normalized time, in beats
	for (var i =0;i < keys.length; i++)
    keys[i] *= period/1;// real time (period per one beat)
  quats.push((new THREE.Quaternion()).setFromEuler(euler0));
  quats.push((new THREE.Quaternion()).setFromEuler(euler05));
  quats.push((new THREE.Quaternion()).setFromEuler(euler1));

  actionStart = clock.getElapsedTime();
}

function setKeys1() {
  //////////////////////////////////////////////////////////////
  // Euler orientations
  var euler0 = new THREE.Euler(0, 0, 0);     // start
  var euler05 = new THREE.Euler(.3, 0, 0);   
  var euler08 = new THREE.Euler(0.15, 0, 0); 
  var euler09 = new THREE.Euler(0.0, 0, 0); 
  var euler1 = new THREE.Euler(0.0, 0, 0);  // end of period

  // set keys & quats
  keys = [];
  quats = [];
  keys.push(0, 0.05, 0.354, 0.8, 1);  // normalized time, in beats
	for (var i =0;i < keys.length; i++)
    keys[i] *= period/1;// real time (period per one beat)
  quats = [];
  quats.push((new THREE.Quaternion()).setFromEuler(euler0));
  quats.push((new THREE.Quaternion()).setFromEuler(euler05));
  quats.push((new THREE.Quaternion()).setFromEuler(euler08));
  quats.push((new THREE.Quaternion()).setFromEuler(euler09));
 ...