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. }; }