stick animate(simple)

by pkin159

HTML

<body>
<div id="info">demo page<br/>
<a href = "javascript:Play();">play</a>

</div>

<script src="https://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>
    <script src="https://pkin159.github.io/project/js/dat.gui.min.js"></script>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ff0000
}
#gui {
    position: absolute;
    top: 40px;
    left: 20px;
    height: 350px;
}

JavaScript

// keyframe animation
var keyframes = [];  // array of objects
var thetaMaxR = .3;
var thetaMaxL = .3;
var thetaHit = -.2;
var keyframesL = [
    {key: 0, value: thetaMaxL},
    {key: 0.5, value: thetaHit},
    {key: 1, value: thetaMaxL}
];
var keyframesR = [
    {key: 0, value: thetaHit},
    {key: 0.5, value: thetaMaxR},
    {key: 1, value: thetaHit}
];
////////init
var camera, scene, renderer, light, controls;
var clock = new THREE.Clock();
var gcontrols;
////////geometry
var sticks;
////////Play
var play, CheckF, Check;
////////animate
var startT;
var angle = 0.2, angle2 = 0.2;/////stick angle

init();
animate();

function Interpolator (keyframes, s) {
    for (var i = 0; i < keyframes.length; i++) {
        if (s > keyframes[i].key)
            continue;
        else {
            if (i != 0) --i;
            break;  // between i & i+1
        }
    }
    
    return keyframes[i].value + (s - keyframes[i].key)/(keyframes[i+1].key - keyframes[i].key)*
        (keyframes[i+1].value - keyframes[i].value);
}

function init() {
	 scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);
	
	var gridXZ = new THREE.GridHelper(100, 20);
    gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0x000000));
	scene.add(gridXZ);
	
	Drumsticks();
	Drum();
	
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.y = 80;
    camera.position.z = 400;
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    var ambientLight = new THREE.AmbientLight(0x555555);
    scene.add(ambientLight);
    
	var light = new THREE.PointLight(0xffffff, 1, 0);
	light.position.set(100, 100, 100);
	scene.add(light);
	
	gcontrols = {
        speed:10.,
        high:0.1,
		bpm:60.,
		NOS:1.
    };
	var gui = new...