三.js如何淡出音频

Question

A 想要在两个音频之间制作交叉淡入淡出效果。我尝试吐温.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();

使用吐温或其他方式来做到这一点很热？

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。

Answer 2

其他解决方案是使用 THREE.audioListener 内部音量值：

var listener = new THREE.AudioListener();
new TWEEN.Tween(listener.gain.gain)
  .to(
   {
   value: 0,
   },
   1000
  ).start()