CODEWITHSUNDEEP
three.jsweb-audio-apitone.js
B-30
B-30

Reputation: 383

Using Tone.js with Three.js - how to get positional audio?

I can easily get Tone.js to generate a tone within a Three.js world, simply by calling, e.g., oscillator = new Tone.Oscillator(440, "sine").toMaster();, but I can't work out how to connect that tone to an AudioListener in the Three.js world to make it be a positional sound. Does anybody know how to do this?

Using the oscillator built into Three.js, it works perfectly as per the Three.js audio-sandbox example, where it uses oscillator = listener.context.createOscillator(); so I assume this proves I need to connect the Tone.js output to the AudioContext of the listener, but I just can't figure out how to do that, and nor can I find anything on the web about it. Any examples I can find simply use the toMaster() approach as above, so the sounds are not positional.

Any help most appreciated!

Upvotes: 6

Views: 1618

Answers (2)

flowe
flowe

Reputation: 21

for anyone looking for this in the future, I got this working with an audio file:

// declare the listener:
    const listener = new THREE.AudioListener();
    camera.add( listener );

    // set mesh (make sure to set material & geometry before
    sphere = new THREE.Mesh(geometry, material1);

    //set positional audio
    let sound1 = new THREE.PositionalAudio( listener );
    Tone.setContext(sound1.context);
    let player = new Tone.Player
    ({
            url: "sound/test2.wav",
            loop: true,
            autostart: true, //as a lot of browsers don't auto play audio
    });
    sound1.setNodeSource(player);
    sound1.setRefDistance( 3 );
    sphere.add(sound1);

Upvotes: 2

B-30
B-30

Reputation: 383

I figured it out, posting self-answer for those searching in the future. You simply need to set the context of Tone.js to be the same as the PositionalAudio object, then setNodeSource of that object to be the Tone.js oscillator, add it to some geometry and hey presto, positional audio generated by Tone.js:

var mesh1 = new THREE.Mesh( geometry, material ); //geometry, material defined elsewhere
scene.add(mesh1);
listener = new THREE.AudioListener();
camera.add( listener );
var sound1 = new THREE.PositionalAudio( listener );
Tone.context = sound1.context;
var oscillator1 = new Tone.Oscillator(440, "sine");
sound1.setNodeSource (oscillator1);
mesh1.add( sound1 );

Upvotes: 10

Related Questions