2016-02-19 11 views
6

A desidera creare un effetto dissolvenza incrociata tra due audio. provo Tween.JS per questo, ma non è farlo senza problemi, come voglio ...Three.js come dissolvenza audio?

var sound_b_1 = new THREE.PositionalAudio(listener); 
sound_b_1.load('mysound.ogg'); 
sound_b_1.setRefDistance(20); 
sound_b_1.setVolume(1); 
sound_b_1.autoplay = true; 
scene.add(sound_b_1); 

var volume = {x : 1}; // tweens not work without object 
// using Tween.js 
new TWEEN.Tween(volume).to({ 
    x: 0 
}, 1000).onUpdate(function() { 
    sound_b_1.setVolume(this.x); 
}).onComplete(function() { 
    sound_b_1.stop(); 
}).start(); 

caldo per fare che l'uso di Tween o altri modi?

+3

modo che il codice si dispone non funziona? puoi creare un violino? – gaitat

risposta

2

Non vedo niente di sbagliato con il codice che hai fornito, funziona bene per me, solo che non è completo. È necessario chiamare TWEEN.update(time) nel rendere la funzione/aggiornamento:

codice completo:

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

camera.position.z = 5; 

var listener = new THREE.AudioListener(); 
var sound_b_1 = new THREE.PositionalAudio(listener) 
sound_b_1.load('mysound.ogg'); 
sound_b_1.setRefDistance(20); 
sound_b_1.setVolume(1); 
sound_b_1.autoplay = true; 
scene.add(sound_b_1); 

var volume = {x : 1}; // tweens not work without object 
// using Tween.js 
new TWEEN.Tween(volume).to({ 
    x: 0 
}, 1000).onUpdate(function() { 
    sound_b_1.setVolume(this.x); 
}).onComplete(function() { 
    sound_b_1.stop(); 
}).start(); 

var time = 0; // incrementing time variable 
var render = function() { 
    requestAnimationFrame(render); 
    // normally the render render function is called 60 times a second. 
    // convert to milliseconds 
    time += ((1/60) * 1000); 
    TWEEN.update(time); 

    renderer.render(scene, camera); 
}; 
//setTimeout(()=>{sound_b_1.stop();}, 5000); 
render(); 

Questo farà sì che mysound.ogg per iniziare a giocare a tutto volume e poi interpolati linearmente a nessun volume a tutti e poi fermarsi giocando.

Se volete un altro clip audio per iniziare a giocare basta fare la stessa cosa ma lasciare che l'inizio del volume a 0 e interpolare a 1.