Code viewer for World: exp Sampler

See raw JS.


// Cloned by Mathias Bazin on 2 Jul 2018 from World "Sampler" by Mathias Bazin 
// Please leave this clone trail here.
 
const audiofiles = [
        "/uploads/mathias/clap.wav",
        "/uploads/mathias/crash.wav",
        "/uploads/mathias/kick.wav",
        "/uploads/mathias/perc.wav",
        "/uploads/mathias/snap.wav",
        "/uploads/mathias/snare.wav",
        "/uploads/mathias/kalimba.mp3",
        "/uploads/mathias/hihat.wav"
    ];

function World() 
{ 
    
    var Button = function(x, y, z, width, height, color, name)
    {
        //place button in the scene
        this.object = new THREE.Mesh(new THREE.BoxBufferGeometry( width, 30, height ), new THREE.MeshBasicMaterial({color:color}));
	 	this.object.position.set(x, y, z);
	    threeworld.scene.add(this.object);
	    
	    //set attributes
	    if (typeof name !== 'undefined') this.object.name = name; //name is optional
	    
	    objects.push(this.object);
    }
    
    var PlaySampleButton = function(x, y, z, width, height, color, type, name)
    {
        Button.call(this,x, y, z, width, height, color, name);
        this.type = type;
    }
    PlaySampleButton.prototype = Object.create(Button.prototype);
    PlaySampleButton.prototype.constructor = PlaySampleButton;
    PlaySampleButton.prototype.activate = function()
    {
        let i = this.type;
        let a = new Audio(audiofiles[i]);
        a.play();
    }
    
    let objects = [];
    // let audios = [];
    
    // var playSample = function()
    // {
    //     let i = this.type;
    //     let a = new Audio(audiofiles[i]);
    //     a.play();
    // }
    
    function initDrag ( x, y )              // x,y position on screen
    {
        let obj = objectClicked( x, y ); 
        console.log(obj)
        
        if (obj !== null) 
        {
            
            obj.activate();
            
        }
    }

    
    function objectClicked(x,y)
    {
        for (let o of objects)
        {
            if (threeworld.hitsObject(x,y,o))
            {
                console.log(o.name);
                return o;
            }
        }
        
        console.log("the Void");
        return null;
    }
    
    
    function load()
    {
        for (let f of audiofiles)
        {
            let a = new Audio(f);
            audios.push(a);
        }
    }

	this.newRun = function()
	{
	   // load();
	    let s1 = "<p> Red <select id='rselect' name='red audio'>";
	    
	    for (let i = 0; i<audiofiles.length; i++)
	    {
	        s1 +=  '<option value="'+i+'">Volvo</option>';
	    }
	    
	    s1 += "</select></p>"
	    
	    $("user_span1").html(s1);
	    
	    threeworld.camera = new THREE.OrthographicCamera( $(document).width() / - 2, $(document).width() / 2, $(document).height() / 2, $(document).height() / - 2, 1, 1000 );
	 	threeworld.init2d ( 50, 0, 0x000000 ); //0x93A1AC
	 	
	 	
	 	//drawing the board
	 	
	 	let bb = new PlaySampleButton(-20,0,20,30,30,"red", 0, "redB");
	 	console.log(PlaySampleButton.prototype)
// 	 	let cube1 = new THREE.Mesh(new THREE.BoxBufferGeometry( 30, 30, 30 ), new THREE.MeshBasicMaterial({color:"red"}));
// 	 	cube1.name = "r";
// 	 	cube1.position.set(-20, 0, 20);
// 	    threeworld.scene.add(cube1);
// 	    objects.push(cube1);
	    
	    let cube2 = new THREE.Mesh(new THREE.BoxBufferGeometry( 30, 30, 30 ), new THREE.MeshBasicMaterial({color:"yellow"}));
	 	cube2.name = "y";
	 	cube2.position.set(20, 0, 20);
	    threeworld.scene.add(cube2);
	    objects.push(cube2);
	    
	    let cube3 = new THREE.Mesh(new THREE.BoxBufferGeometry( 30, 30, 30 ), new THREE.MeshBasicMaterial({color:"green"}));
	 	cube3.name = "g";
	 	cube3.position.set(-20, 0, -20);
	    threeworld.scene.add(cube3);
	    objects.push(cube3);
	    
	    let cube4 = new THREE.Mesh(new THREE.BoxBufferGeometry( 30, 30, 30 ), new THREE.MeshBasicMaterial({color:"blue"}));
	 	cube4.name = "b";
	 	cube4.position.set(20, 0, -20);
	    threeworld.scene.add(cube4);
	    objects.push(cube4);
	   
	 	

	 	//disabling camera controls
        threehandler.mouseZoom     = function ( delta ) {  };
        threehandler.touchDrag     = function ( x, y )  {  };
        threehandler.touchZoom     = function ( delta ) {  };
        threehandler.mouseDrag     = function ( x, y )  {  }; 
        threehandler.initTouchDrag  = initDrag;
        threehandler.initMouseDrag  = initDrag;

	};


	this.nextStep = function()		 
	{
		// Code for Three.js re-drawing of objects.  		
	};

}