Drum kit Looping

by jmchen

HTML

<div id="info">Drum Kit Looping</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

var camera, scene, renderer, geometry, material, mesh, light, controls;
var clock = new THREE.Clock();
var texture;
var bass, snare;
var sweepLine;
var bpm = 60;
var sweepVel = 100 / (60/bpm * 4);

init();
animate();

function init() {
    scene = new THREE.Scene();

//    camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 1000);
    camera = new THREE.OrthographicCamera (-120,120,120,-120, -1000,1000);
    camera.position.z = 150;
    scene.add(camera);

    THREE.ImageUtils.crossOrigin = '';
    texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/CrOJa9q.jpg');
    geometry = new THREE.PlaneGeometry(40, 40);
    material = new THREE.MeshBasicMaterial({map: texture});
    bass = new THREE.Mesh(geometry, material);
    bass.position.set (-70,70,5);
    scene.add(bass);

    texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/ABEe2qM.jpg');
    geometry = new THREE.PlaneGeometry(40, 30);
    material = new THREE.MeshBasicMaterial({map: texture});
    snare = new THREE.Mesh(geometry, material);
    snare.position.set (-20,70,5);
    scene.add(snare);
    
    geometry = new THREE.PlaneGeometry(200, 30);
    material = new THREE.MeshBasicMaterial({color:0xffffff});
    loopArea = new THREE.Mesh(geometry, material);
    scene.add (loopArea);
    loopArea.position.set (0,0,-2);
    
    light = new THREE.PointLight(0xffffff);
    light.position.set(100, 300, 200);
    scene.add(light);
    
    material = new THREE.LineBasicMaterial({color: 0x000055});
    geometry = new THREE.Geometry();
    geometry.vertices.push(
	    new THREE.Vector3( 5, 15, -1 ),
	    new THREE.Vector3( 5, -15, -1 )
    );
    sweepLine = new THREE.Line( geometry, material );
    scene.add( sweepLine );

    var gridXZ = new THREE.GridHelper(100, 12.5);
    gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
    scene.add(gridXZ);
    gridXZ.rotation.x = Math.PI/2;
    //gridXZ.setColors ('red', 'red');

    renderer = new...