test for timeout and animate

not succes

by jmchen

HTML

<div id="info">demo page</div>
<div>
    <button id='hit' style="display: block margin=10px ">Hit</button>
    <button id='hitMany' style="display: block">Hit Many</button>
</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: #ffff00
}
body {
    overflow: hidden;
}

JavaScript

////////init
var camera, scene, renderer, light, controls, gcontrols;
var clock = new THREE.Clock();
///////geometry
var stick1;
///////animate
var hit;
var startT;
//////play & stop
var play, checkF, check;
var count = 0;


var Stick = function(){
    this.bpm = 0;
    this.intensity = .3;
    this.thetaHit = -.2;
    this.thetaMax = this.intensity;
    this.thetaStandby = .1;
    this.stopS = 0;
    this.S = 0;
    this.check = true;
    this.keyframes = [
        {key: 0, value: this.thetaStandby},
        {key: .3, value: this.thetaMax},
        {key: .5, value: this.thetaHit},
        {key: 1, value: this.thetaStandby}
    ];
    ///////geometry
    this.mesh = THREE.Object3D();
    this.position = new THREE.Vector3();
};

Stick.prototype.NewMesh = function(){
    a = new THREE.Object3D();
    var geometry = new THREE.CylinderGeometry(1.4, 1.4, 70, 32);
    var material = new THREE.MeshPhongMaterial({
        color: 0xffff00
    });
    var cylinder = new THREE.Mesh(geometry, material);

    cylinder.rotation.x = Math.PI / 2;
    cylinder.position.set(0, 0, -40);

    var geometry1 = new THREE.CylinderGeometry(1.4, 0.8, 20, 32);
    var cylinder2 = new THREE.Mesh(geometry1, material);

    cylinder2.rotation.x = Math.PI / 2;
    cylinder2.position.set(0, 0, -85);

    var geometry3 = new THREE.SphereGeometry(1.5, 32, 32);
    var sphere = new THREE.Mesh(geometry3, material);
    sphere.position.set(0, 0, -95);

    a.add(cylinder);
    a.add(cylinder2);
    a.add(sphere);

    this.mesh = a;

};
Stick.prototype.Update = function(elapsed,startT,T){
    this.mesh.position.copy(this.position);
//debugger;
    if(this.check){
        this.S = (elapsed - startT) % T / T;

         var angle = this.Interpolator(this.S);
    }
   
    if((angle > this.thetaStandby && this.S > 0.01) && !this.check){
        this.stopS = this.S;
        this.mesh.rotation.x = angle;
    }else{
        this.mesh.rotation.x = angle;
        this.check = false;
    }
   ...