2016-10-05 04:12:46 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > Panner3D< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >
< link rel = "icon" type = "image/png" sizes = "174x174" href = "./style/favicon.png" >
2017-03-18 16:35:37 +00:00
< script src = "../build/Tone.js" > < / script >
< script src = "./scripts/three.min.js" > < / script >
< script src = "./scripts/OrbitControls.js" > < / script >
2017-03-26 19:40:29 +00:00
< script src = "./scripts/WebGLDetector.js" > < / script >
2017-03-18 16:35:37 +00:00
< script src = "./scripts/THREE.Tone.js" > < / script >
< script src = "./scripts/jquery.min.js" > < / script >
< script src = "./scripts/draggabilly.js" > < / script >
< script src = "https://tonejs.github.io/Logo/build/Logo.js" > < / script >
< script src = "./scripts/StartAudioContext.js" > < / script >
< script src = "./scripts/Interface.js" > < / script >
2016-10-05 04:12:46 +00:00
< link rel = "stylesheet" type = "text/css" href = "./style/examples.css" >
2017-03-18 16:35:37 +00:00
< script >
2016-10-05 04:12:46 +00:00
// jshint ignore: start
< / script >
< / head >
< body >
< style type = "text/css" >
#three {
width: 100%;
height: 400px;
}
< / style >
< div id = "Content" >
< div id = "Title" > Panner3D< / div >
< div id = "Explanation" >
Tone.Panner3D and Tone.Listener work together to create 3D audio. Connect your synths and sources to Panner3D and then to the master output, anything you connect to the panner will be spatialized according the position of the panner relative to the position of the listener. This example synchronizes the position of the camera with Tone.Listener and the position of each of the spheres with a track.
< / div >
< div id = "three" > < / div >
< / div >
2017-03-18 16:35:37 +00:00
< script >
2016-10-05 04:12:46 +00:00
var greenSphere = new Tone.Panner3D().toMaster();
var drone = new Tone.Player({
2017-06-19 19:39:17 +00:00
url : "./audio/loop/drone.[mp3|ogg]",
2016-10-05 04:12:46 +00:00
loop: true,
}).connect(greenSphere).sync().start(0);
var blueSphere = new Tone.Panner3D().toMaster();
var repeat = new Tone.Player({
2017-06-19 19:39:17 +00:00
url : "./audio/loop/bass.[mp3|ogg]",
2016-10-05 04:12:46 +00:00
loop: true,
}).connect(blueSphere).sync().start(0);
var whiteSphere = new Tone.Panner3D().toMaster();
var chords = new Tone.Player({
2017-06-19 19:39:17 +00:00
url : "./audio/loop/chords.[mp3|ogg]",
2016-10-05 04:12:46 +00:00
loop: true,
}).connect(whiteSphere).sync().start(0);
< / script >
2017-03-18 16:35:37 +00:00
< script id = "GUI" >
2017-03-26 19:29:53 +00:00
Interface.Loader()
Interface.Button({
key : 32,
type : "toggle",
text : "Start Sound",
activeText : "Stop",
start : function(){
Tone.Transport.start("+0.1");
},
end : function(){
Tone.Transport.stop();
}
});
// THREE.JS //
2017-03-26 19:40:29 +00:00
if (Detector.webgl){
2017-03-26 19:29:53 +00:00
2016-10-05 04:12:46 +00:00
var SCREEN_WIDTH = document.querySelector("#three").clientWidth;
var SCREEN_HEIGHT = document.querySelector("#three").clientHeight;
var aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera( 50, aspect, 1, 10000 );
camera.position.z = 1;
2016-12-15 18:39:00 +00:00
camera.updateMatrixWorld()
2016-10-05 04:12:46 +00:00
var bassMesh = new THREE.Mesh(
new THREE.SphereBufferGeometry( 2, 16, 8 ),
new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } )
);
scene.add(bassMesh);
bassMesh.position.z = -10
var dronMesh = new THREE.Mesh(
new THREE.SphereBufferGeometry( 1, 16, 8 ),
new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } )
);
scene.add(dronMesh);
var chordMesh = new THREE.Mesh(
new THREE.SphereBufferGeometry( 1, 16, 8 ),
new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } )
);
scene.add(chordMesh);
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
onWindowResize();
renderer.domElement.style.position = "relative";
document.querySelector("#three").appendChild( renderer.domElement );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener("change", function(){
Tone.Listener.updatePosition(camera);
})
//set the camer initially
Tone.Listener.updatePosition(camera);
function onWindowResize( event ) {
SCREEN_WIDTH = document.querySelector("#three").clientWidth;
SCREEN_HEIGHT = document.querySelector("#three").clientHeight;
aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
2016-10-05 14:17:09 +00:00
camera.aspect = aspect;
2016-10-05 04:12:46 +00:00
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.updateProjectionMatrix();
}
2016-10-05 14:17:09 +00:00
window.addEventListener("resize", onWindowResize);
2016-10-05 04:12:46 +00:00
function animate() {
requestAnimationFrame( animate );
var r = Date.now() * 0.0005;
chordMesh.position.x = 3 * Math.cos( r );
chordMesh.position.z = 3 * Math.cos( r );
chordMesh.position.y = 3 * Math.sin( r );
dronMesh.position.x = 4 * Math.cos( 2 * r );
dronMesh.position.z = 4 * Math.sin( 2 * r );
renderer.render( scene, camera );
controls.update();
greenSphere.updatePosition(dronMesh);
blueSphere.updatePosition(bassMesh);
whiteSphere.updatePosition(chordMesh);
}
animate()
2017-03-26 19:29:53 +00:00
}
2016-10-05 04:12:46 +00:00
< / script >
< / style >
< / body >
2017-03-18 16:35:37 +00:00
< / html >
