HitOnce With Graphics

test

by pkin159

HTML

<div>

    <button id='playScore' class='buttonClass'>Play Score</button>
</div>
<div>Set bpm
    <input id='bpm' value=120 style='width:6em'></input>
</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>
<script src='https://jyunming-chen.github.io/WebAudio/js/shared.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

var Stick = function () {
    // properties
    this.T = 3; // in seconds
    this.keys = [];
    this.startTime = 0;
    this.play = true;
    this.angle = 0; // for 'text-based' rendering
    this.instrument = 's';
    loadSounds(this, {
        kick: 'https://jyunming-chen.github.io/WebAudio/kick.wav',
        snare: 'https://jyunming-chen.github.io/WebAudio/snare.wav',
        hihat: 'https://jyunming-chen.github.io/WebAudio/hihat.wav'
    });
    }

	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;
	};
    
    // methods
   Stick.prototype.setT = function (period) {
        this.T = period;
    };
    Stick.prototype.setKeys = function (keys) {
        this.keys = keys;
    };
    Stick.prototype.setMaxKeysValue = function (intensity){
    	var max = 0, maxi;
        for( i = 0; this.keys[i]; i++){
        	if(this.keys[i].value > max){
                max = this.keys[i].value;
            	maxi = i;
            }
        }
        this.keys[maxi].value = intensity;
        console.log(true);
    }
	Stick.prototype.setInstrument = function(instrument){
    	this.instrument = instrument;
    }
    Stick.prototype.interpolate = function (s) { // normalized time
        if (s > 1) // end of cycle
        return this.keys[this.keys.length -...