Turn and Nod

inspired by black and white (Michael Jackson)

by jmchen

HTML

<div id="info">Turn & Nod ...</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

// black or white
// MV ； https://www.youtube.com/watch?v=F2AitTPI5U0
// 5:30 or so

var camera, scene, renderer, geometry, material, mesh, light, controls;
var clock = new THREE.Clock();

var stick = new THREE.Object3D();
var quats = [];
var keys = [];
var actionStart;
var period = 5; // 8 beats = 5 seconds


init();
animate();

// keys & euler angles
// interpolate using quaternion

function setKeys() {
  //////////////////////////////////////////////////////////////
  // Euler orientations
  var euler0 = new THREE.Euler(0, 0, 0);     // start
  var euler1 = new THREE.Euler(.3, 0, 0);   // beat 1
  var euler2 = new THREE.Euler(0.0, 0, 0);  // beat 2
  var euler25 = new THREE.Euler(0.0, -1.57, 0);
  var euler3 = new THREE.Euler(.3, -1.57, 0, 'YXZ');  // beat 3
  var euler4 = new THREE.Euler(0.0, -1.57, 0);  // beat 4
  var euler45 = new THREE.Euler(0.0, 0, 0);
  var euler5= new THREE.Euler(.3, 0, 0);   // beat 5
  var euler6= new THREE.Euler(0.0, 0, 0);  // beat 6
  var euler65 = new THREE.Euler(0.0, 1.57, 0);
  var euler7= new THREE.Euler(.3, 1.57, 0, 'YXZ');  // beat 7
  var euler8= new THREE.Euler(0.0, 1.57, 0);  // beat 8

  // set keys & quats
  // keys array set in normalized time (beats)
  keys.push(0, 0.05, 1.05, 1.5, 2.05, 3.05, 3.5, 4.05, 5.05, 5.5, 6.05, 7.05);
	for (var i =0;i < keys.length; i++)
    keys[i] *= period/8;  // two bars, 8 beats, real time
  
  quats.push((new THREE.Quaternion()).setFromEuler(euler0));
  quats.push((new THREE.Quaternion()).setFromEuler(euler1));
  quats.push((new THREE.Quaternion()).setFromEuler(euler2));
  quats.push((new THREE.Quaternion()).setFromEuler(euler25));
  quats.push((new THREE.Quaternion()).setFromEuler(euler3));
  quats.push((new THREE.Quaternion()).setFromEuler(euler4));
  quats.push((new THREE.Quaternion()).setFromEuler(euler45));
  quats.push((new THREE.Quaternion()).setFromEuler(euler5));
  quats.push((new THREE.Quaternion()).setFromEuler(euler6));
  quats.push((new...