Skip to content

Instantly share code, notes, and snippets.

@valex

valex/index.html

Created September 30, 2018 12:42
Show Gist options
  • Save valex/d4ed2f4cf19a9aff6ab15bab3ce05034 to your computer and use it in GitHub Desktop.
Save valex/d4ed2f4cf19a9aff6ab15bab3ce05034 to your computer and use it in GitHub Desktop.
Download ZIP
Add sound sources to your scene
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js misc - sound</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
font-family: Monospace;
font-size: 13px;
text-align: center;
font-weight: bold;
text-align: center;
}
a {
color: #0078ff;
}
#info {
color: #fff;
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
z-index: 100;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="../libs96/FirstPersonControls.js"></script>
<script>
var container;
var camera, controls, scene, renderer;
var light, pointLight;
var mesh;
var material_sphere1, material_sphere2;
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(-200, 25, 0);
var listener1 = new THREE.AudioListener();
camera.add(listener1);
var listener2 = new THREE.AudioListener();
camera.add(listener2);
var listener3 = new THREE.AudioListener();
camera.add(listener3);
controls = new THREE.FirstPersonControls(camera);
controls.movementSpeed = 70;
controls.lookSpeed = 0.15;
controls.noFly = true;
controls.lookVertical = false;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x000000, 0.0035);
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 0.5, 1).normalize();
scene.add(light);
var cube = new THREE.BoxGeometry(40, 40, 40);
var material_1 = new THREE.MeshBasicMaterial({
color: 0xffffff,
map: new THREE.TextureLoader().load("../assets96/textures/animals/cow.png")
});
var material_2 = new THREE.MeshBasicMaterial({
color: 0xffffff,
map: new THREE.TextureLoader().load("../assets96/textures/animals/dog.jpg")
});
var material_3 = new THREE.MeshBasicMaterial({
color: 0xffffff,
map: new THREE.TextureLoader().load("../assets96/textures/animals/cat.jpg")
});
// sound spheres
var mesh1 = new THREE.Mesh(cube, material_1);
mesh1.position.set(0, 20, 100);
var mesh2 = new THREE.Mesh(cube, material_2);
mesh2.position.set(0, 20, 0);
var mesh3 = new THREE.Mesh(cube, material_3);
mesh3.position.set(0, 20, -100);
scene.add(mesh1);
scene.add(mesh2);
scene.add(mesh3);
// instantiate a loader
var loader = new THREE.AudioLoader();
// instantiate audio object
var sound1 = new THREE.PositionalAudio(listener1);
// load a resource
loader.load(
// resource URL
'../assets96/audio/cow.ogg',
// onLoad callback
function ( audioBuffer ) {
// set the audio object buffer to the loaded object
sound1.setBuffer( audioBuffer );
sound1.setRefDistance(20);
sound1.setLoop(true);
sound1.setRolloffFactor(2);
sound1.play();
mesh1.add(sound1);
},
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function ( err ) {
console.log( 'An error happened' );
}
);
// instantiate audio object
var sound2 = new THREE.PositionalAudio(listener2);
// load a resource
loader.load(
// resource URL
'../assets96/audio/dog.ogg',
// onLoad callback
function ( audioBuffer ) {
// set the audio object buffer to the loaded object
sound2.setBuffer( audioBuffer );
sound2.setRefDistance(20);
sound2.setLoop(true);
sound2.setRolloffFactor(2);
sound2.play();
mesh2.add(sound2);
},
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function ( err ) {
console.log( 'An error happened' );
}
);
// instantiate audio object
var sound3 = new THREE.PositionalAudio(listener3);
// load a resource
loader.load(
// resource URL
'../assets96/audio/cat.ogg',
// onLoad callback
function ( audioBuffer ) {
// set the audio object buffer to the loaded object
sound3.setBuffer( audioBuffer );
sound3.setRefDistance(20);
sound3.setLoop(true);
sound3.setRolloffFactor(2);
sound3.play();
mesh3.add(sound3);
},
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function ( err ) {
console.log( 'An error happened' );
}
);
// ground
// var helper = new THREE.GridHelper(500, 10);
// helper.color1.setHex(0x444444);
// helper.color2.setHex(0x444444);
// helper.position.y = 0.1;
// scene.add(helper);
//
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
container.innerHTML = "";
container.appendChild(renderer.domElement);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
controls.handleResize();
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta(),
time = clock.getElapsedTime() * 5;
controls.update(delta);
// material_sphere1.color.setHSL( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 0.5 );
// material_sphere2.color.setHSL( 0.1, 0.3 + 0.7 * ( 1 + Math.sin( time ) ) / 2, 0.5 );
renderer.render(scene, camera);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment