2016-10-05 04:12:46 +00:00
<!DOCTYPE html>
< html >
< head >
2019-01-09 01:21:29 +00:00
< meta charset = "utf-8" >
< title > Panner3d< / title >
2016-10-05 04:12:46 +00:00
2019-01-09 01:21:29 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
< link rel = "icon" type = "image/png" sizes = "174x174" href = "./favicon.png" >
< script src = "https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js" > < / script >
2017-03-18 16:35:37 +00:00
< script src = "../build/Tone.js" > < / script >
2019-01-09 01:21:29 +00:00
< script src = "./js/tonejs-ui.js" > < / script >
< script src = "./js/three.min.js" > < / script >
< script src = "./js/OrbitControls.js" > < / script >
< script src = "./js/WebGLDetector.js" > < / script >
< script src = "./js/THREE.Tone.js" > < / script >
2016-10-05 04:12:46 +00:00
< style type = "text/css" >
2019-01-09 01:21:29 +00:00
tone-play-toggle {
margin-bottom: 10px;
}
2016-10-05 04:12:46 +00:00
#three {
width: 100%;
height: 400px;
}
< / style >
2019-01-09 01:21:29 +00:00
< / head >
< body >
< tone-example >
< tone-loader > < / tone-loader >
< tone-explanation label = "3D Panning" >
2016-10-05 04:12:46 +00:00
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.
2019-01-09 01:21:29 +00:00
< br > < br >
Note: the 3D panning effect is more effective with headphones.
< / tone-explanation >
2016-10-05 04:12:46 +00:00
2019-01-09 01:21:29 +00:00
< tone-content >
< tone-play-toggle > < / tone-play-toggle >
< div id = "three" > < / div >
< / tone-content >
< / tone-example >
2016-10-05 04:12:46 +00:00
2019-01-09 01:21:29 +00:00
< script type = "text/javascript" >
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]",
2019-01-09 01:21:29 +00:00
loop : true,
2016-10-05 04:12:46 +00:00
}).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]",
2019-01-09 01:21:29 +00:00
loop : true,
2016-10-05 04:12:46 +00:00
}).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]",
2019-01-09 01:21:29 +00:00
loop : true,
2016-10-05 04:12:46 +00:00
}).connect(whiteSphere).sync().start(0);
2017-03-26 19:29:53 +00:00
2019-01-09 01:21:29 +00:00
//bind the interface
document.querySelector("tone-play-toggle").bind(Tone.Transport);
2017-03-26 19:29:53 +00:00
// 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;
2019-01-09 01:21:29 +00:00
console.log(SCREEN_WIDTH, SCREEN_HEIGHT, aspect);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, aspect, 1, 10000);
2016-10-05 04:12:46 +00:00
camera.position.z = 1;
2019-01-09 01:21:29 +00:00
camera.updateMatrixWorld();
2016-10-05 04:12:46 +00:00
var bassMesh = new THREE.Mesh(
2019-01-09 01:21:29 +00:00
new THREE.SphereBufferGeometry(2, 16, 8),
new THREE.MeshBasicMaterial({ color : 0xffffff, wireframe : true })
2016-10-05 04:12:46 +00:00
);
scene.add(bassMesh);
2019-01-09 01:21:29 +00:00
bassMesh.position.z = -10;
2016-10-05 04:12:46 +00:00
var dronMesh = new THREE.Mesh(
2019-01-09 01:21:29 +00:00
new THREE.SphereBufferGeometry(1, 16, 8),
new THREE.MeshBasicMaterial({ color : 0xff0000, wireframe : true })
2016-10-05 04:12:46 +00:00
);
scene.add(dronMesh);
var chordMesh = new THREE.Mesh(
2019-01-09 01:21:29 +00:00
new THREE.SphereBufferGeometry(1, 16, 8),
new THREE.MeshBasicMaterial({ color : 0xff00ff, wireframe : true })
2016-10-05 04:12:46 +00:00
);
scene.add(chordMesh);
2019-01-09 01:21:29 +00:00
var renderer = new THREE.WebGLRenderer({ antialias : true });
renderer.setPixelRatio(window.devicePixelRatio);
2016-10-05 04:12:46 +00:00
onWindowResize();
renderer.domElement.style.position = "relative";
2019-01-09 01:21:29 +00:00
document.querySelector("#three").appendChild(renderer.domElement);
2016-10-05 04:12:46 +00:00
2019-01-09 01:21:29 +00:00
controls = new THREE.OrbitControls(camera, renderer.domElement);
2016-10-05 04:12:46 +00:00
controls.addEventListener("change", function(){
Tone.Listener.updatePosition(camera);
2019-01-09 01:21:29 +00:00
});
2016-10-05 04:12:46 +00:00
//set the camer initially
Tone.Listener.updatePosition(camera);
2019-01-09 01:21:29 +00:00
function onWindowResize(event){
2016-10-05 04:12:46 +00:00
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;
2019-01-09 01:21:29 +00:00
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
2016-10-05 04:12:46 +00:00
camera.updateProjectionMatrix();
}
2016-10-05 14:17:09 +00:00
window.addEventListener("resize", onWindowResize);
2019-01-09 01:21:29 +00:00
function animate(){
requestAnimationFrame(animate);
2016-10-05 04:12:46 +00:00
var r = Date.now() * 0.0005;
2019-01-09 01:21:29 +00:00
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);
2016-10-05 04:12:46 +00:00
controls.update();
greenSphere.updatePosition(dronMesh);
blueSphere.updatePosition(bassMesh);
whiteSphere.updatePosition(chordMesh);
}
2019-01-09 01:21:29 +00:00
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 >
