Adding stuff to camera before first render cycle

[harsox]

I want to add an AudioListener to the camera that picks up sounds from the scene.

I tried adding the audioListener in the default camera config:
camera={{children: <audioListener name="listener" />}}

That doesn't seem to do anything, as the default camera's children are completely empty.

I also tried adding it in the Canvas onCreated callback function. This way the listener is actually added to the camera, but only after the first render cycle.
I have an AmbientSound scene object that depends on the listener for initiating its audio (background noises), which looks something like this:

const AmbientSound = () => {
    const { camera } = useThree()

    const soundMesh = useMemo(() => {
        const listener = camera.getObjectByName('audio-listener') as THREE.AudioListener
        
        const sound = new THREE.PositionalAudio(listener)
        const audioLoader = new THREE.AudioLoader
        audioLoader.load('/sounds/background.ogg', (buffer) => {
            sound.setBuffer(buffer)
            sound.setRefDistance(20)
            sound.setLoop(true)
            sound.setVolume(0.5)
            sound.play()
        })

        const mesh = new THREE.Mesh
        mesh.add(sound)

        return mesh
    }, [])

    return (
        <primitive object={soundMesh} />
    )
}

I could build solutions around this, for instance by only initiating the AmbientSound object after the very first render, but I feel like I'm approaching this the wrong way.

Any suggestions?

I've been following these resources:
https://threejs.org/docs/#api/en/audio/PositionalAudio
https://github.com/mrdoob/three.js/blob/master/examples/webaudio_sandbox.html

[drcmda]

@harsox

analyser: https://codesandbox.io/s/r3f-audo-analyser-38vb8?file=/src/App.js

positionalaudio: https://codesandbox.io/s/r3f-drei-positionalaudio-yi1o0

you should never have to add children into imperative three stuff, that's mixing concerns too much and you should consider it an anti pattern. just like you dont touch the dom with react-dom.

ps. that's the abstraction we made for drei/positionalaudio https://github.com/react-spring/drei/blob/master/src/abstractions/PositionalAudio.tsx