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或其他方式做到这一点很热吗？

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 内部音量值：

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    
    <title>zoned.at url link shortener</title>
    
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Karla:wght@300&family=PT+Sans&display=swap" rel="stylesheet">
    
    <script type="text/javascript" src="lib/jquery-3.5.1.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="lib/tooltipster-master/dist/css/tooltipster.bundle.min.css" />
    <script type="text/javascript" src="lib/tooltipster-master/dist/js/tooltipster.bundle.min.js"></script>
    
    <link href="content.css" rel="stylesheet">
</head>
<body theme="light">
    <img id="btnThemeSwitch" src="/nicerapp/siteMedia/btnThemeSwitch_icon.png" class="tooltip" title="Switch between light and dark theme" alt="Switch between light and dark theme" tooltipTheme="mainTooltipTheme" onclick="nas.themeSwitch()"/>
    <form id="siteSettings" action="/" method="POST" style="display:none;">
        <select id="siteTheme" name="siteTheme" form="siteSettings" onchange="this.form.submit()">
            <optgroup>
            <option value="dark" >Dark</option>
            <option value="light" >Light</option>
            </optgroup>
        </select>
    </form>    

    <div class="flex-container">
    <div class="row">
    <div class="flex-item">
                <div class="flex-title">
            <h1>zoned.at url link shortener</h1>
            <div class="H2" colspan="3">Pricing</div>
        </div>
        
        <table class="content">
        <tbody>
            <tr>
                <td class="offer">
                <div class="offerBefore"></div>
                <div class="offer">
                    <div class="pricing">
                    <div class="pricingTitle">
                        <h3>Member</h3>
                    </div>
                    <div class="conditions">
                        <div class="condition tooltip siteMainTooltipsterTheme tooltipLinks">
                            <div>Links</div>
                            <div>Unlimited</div>
                        </div>
                        <div class="condition tooltip siteMainTooltipsterTheme tooltipRedirects">
                            <div>Redirects</div>
                            <div>two-hundred-thousand (max, per month)<br/>(you'll be notified per e-mail when you risk losing clicks)</div>
                        </div>
                        <div class="condition tooltip siteMainTooltipsterTheme tooltipChange">
                            <div>Change the url redirected</div>
                            <div>to any url</div>
                        </div>
                        <div class="condition tooltip siteMainTooltipsterTheme tooltipCustom">
                            <div>Custom links / branding</div>
                            <div>10 max</div>
                        </div>
                        <div class="condition tooltip siteMainTooltipsterTheme tooltipDelay">
                            <div>Delay before redirect</div>
                            <div>
                                10 seconds (or more, depending on your settings)<br/>
                                (redirect also happens when user clicks on 'proceed')
                            </div>
                        </div>
                    </div>
                    </div>
                    <h3 class="pricing">Price : 10 USD per month</h3>
                </div>
                </td>
            </tr>
        </tbody>
        </table>
        <script>
            $(document).ready(function() {
                $('.tooltipLinks').each(function(idx,el){
                    el.title = 'Total number of URLs that can get translated for you by https://zoned.at';
                });
                $('.tooltipRedirects').each(function(idx,el){
                    el.title = 'Total number of times your URLs can get redirected to your chosen destination for such a URL.';
                });
                $('.tooltipChange').each(function(idx,el){
                    el.title = 'Whether or not (and if so, how) the URL redirected to can be changed.';
                });
                $('.tooltipCustom').each(function(idx,el){
                    el.title = 'Whether or not (and if so, how many) you can use https://zoned.at/yourBrandLink to point to a destination, instead of https://zoned.at/cjd8J';
                });
                $('.tooltipDelay').each(function(idx,el){
                    el.title = 'Whether or not (and if so, for how long) there will be a forced delay before the user is redirected to the destination.';
                });
                $('.tooltip').tooltipster({
                    theme : 'siteMainTooltipsterTheme',
                    animation : 'grow'
                });
                
                $('.offerBefore').each(function(idx,el){
                    $(el).css({ width : $(el).parent('td.offer').width(), height : $(el).parent('td.offer').height() });
                });
                $('td.offer').mouseover(function(){
                    $(this).addClass('anim');
                });
                $('div.offer').hover(function() {
                    $(this).parent('td.offer').removeClass('offer').addClass('offerHover');
                    
                }, function() {
                    $(this).parent('td.offerHover').addClass('offer').removeClass('offerHover');
                });
            });
        </script>
    </div> <!-- class="flex-item" -->
    </div> <!-- class="row" -->
    </div> <!-- class="flex-container" -->
</body>
</html>

Three.js如何淡出音频？

2 个答案: