Three.js如何淡出音频? [英] Three.js how to fade out audio?

问题描述

要在两个音频之间进行淡入淡出效果. 为此，我尝试使用Tween.JS，但操作并不顺利，我想要...

A want to make crossfade effect between two audio. I try Tween.JS for that, but it's not do it smoothly, how I want...

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或其他方式吗?

Hot to do that using Tween or other ways?

推荐答案

我看不到您提供的代码有什么问题，对我来说很好用，只是它不完整.您需要在渲染/更新功能中调用TWEEN.update(time):

I do not see anything wrong with the code you provided, works fine for me, only it is not complete. You need to call TWEEN.update(time) in your render/update function:

完整代码:

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开始以最大音量播放，然后线性插值至完全没有音量，然后停止播放.

This will cause mysound.ogg to start playing at full volume and then interpolated linearly to no volume at all and then stop playing.

如果您想开始播放另一个音频片段，您只需做同样的事情，但是让音量从0开始并插值到1.

If you want another audio clip to start playing you just do the same thing but let the volume start at 0 and interpolate to 1.

这篇关于Three.js如何淡出音频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！