Three.js如何淡出音频？

Question

我想在两个音频之间制作交叉淡入淡出效果。 我尝试使用Tween.JS实现，但它不能像我想要的那样平滑地实现...

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();

如何使用Tween或其他方式实现这一点？

- skywind

---

你的代码不能正常工作？你能创建一个"fiddle"吗？ - gaitat

Answer 1

我认为您提供的代码没有任何问题，对我来说运行得很好，只是不完整。您需要在您的渲染/更新函数中调用TWEEN.update(time)：

完整代码：

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();

这将导致mysound.ogg以全音量开始播放，然后线性插值到无音量，然后停止播放。

如果您想要另一个音频剪辑开始播放，只需执行相同的操作，但让音量从0开始插值到1。

- micnil

Answer 2

另一种解决方案是使用THREE.audioListener的内部音量值：

var listener = new THREE.AudioListener();

new TWEEN.Tween(listener.gain.gain)
  .to(
   {
   value: 0,
   },
   1000
  ).start()

- Jeronimas