JSFiddle - React, Tailwind, and code Playground

by pkin159

HTML

<script src="https://github.com/pkin159/web3d/blob/master/js/OrbitControls.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

<div id  = 'control'>
        <button id = "play">Play</button><br>
        <button id = "play1">PlayDemo1</button><br>
        <button id = "play2">PlayDemo2</button><br>
        <button id = "play3">PlayDemo3</button><br>
        <button id = "play4">Test</button><br>
        <button id = "play5">Test2</button><br>
        <button id = "play6">Test3</button><br>
		<button id = "reset">Reset </button><br>

	</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://pkin159.github.io/project/js/OrbitControls.js"></script>
<script src="https://pkin159.github.io/project/js/dat.gui.min.js"></script>
<script src="https://pkin159.github.io/project/js/jquery-2.1.4.min.js"></script>
<script src='shared.js'></script>
<script src="scoreNoLR.js"></script>
<script src="DrumKitGeometry-S.js"></script>
<script src="normallr.js"></script>
<script src="ScoreDemo.js"></script>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
#control {
  position: absolute;
  top: 0px;
  padding: 10px;
  text-align: left;
  right:5%;
  color: #00ff00;
}
body {
    overflow: hidden;
}

JavaScript

var frameStart, frameEnd;
var intensity = 0.5;
var instrument = "s";
var bpm = 60;
var sounds;

//////////////////////////////
/*
if(yourscore[0].bpm !== undefined){
    bpm = yourscore[0].bpm;
    yourscore.pop();
}*/

//var scoreArray = normalLR(/*score!!!!!!!!!!*/);
    //console.log(scoreArray);
    normalLR(/*score*/);

var demo1 = normalLR(scoredemo);
var demo2 = normalLR(scoredemo2);
var demo3 = scoredemo3;
var demo4 = normalLR(scoredemo4);
var demo5 = normalLR(scoredemo5);
var demo6 = normalLR(scoredemo6);
console.log (demo1);
//////////////////////////////


var SoundSample = function(){
        loadSounds(this, {
        bass: 'bass.mp3',
        snare: 'snare.mp3',
        hatOp: 'hatOp.mp3',
        hatCl: 'hatCl.mp3',
        stick: 'stick.mp3',
        crash: 'crash.mp3',
        ride: 'ride.mp3',
        tomFl: 'tomFl.mp3',
        tomHh: 'tomHh.mp3',
        tomLw: 'tomLw.mp3'
    });
}

var Stick = function () {
    // properties
    this.T = 4; // in seconds
    this.keys = [{   /////////will be change
        timeS: 0,
        value: 0
    }, {
        timeS: 0.1,
        value: 0.2//3.14 / 4
    }, {
        timeS: 0.2,
        value: -.2
    },{
        timeS: 0.5,
        value: 0
    },
       {
        timeS: 1,
        value: 0
    }
                ];
    this.frame1 = new THREE.Object3D();  // starting & ending frames
    this.frame2 = new THREE.Object3D();  // of startOneCycle
                                         // default frame1 = frame2 = frameChair.clone();
    
    this.startTime = 0;
    this.angle = 0; // for 'text-based' rendering
    this.color = new THREE.Color(1,0,0);
    this.group = newMesh();
    this.object = new THREE.Object3D();
    this.object.add(this.group);

    // methods
    this.setT = function (period) {
        this.T = period;
    }
    this.setMaxKeysValue = function (intensity){
        this.keys[1].value = intensity;
    }

    this.interpolate = function (s) { // normalized time
        if (s > 1) //...