WebRTC流场景下Positional Audio无法正常工作的问题排查

我之前实现了一个Sound组件，能在其他玩家上方创建网格作为声源，以相机为监听器实现空间音频，运行正常：

import { useEffect, useRef, } from 'react'
import { useThree, useLoader, useFrame } from '@react-three/fiber'
import * as THREE from 'three'

interface SoundProps {
  url: string
  is_Playing: boolean
}

export default function Sound({ url, is_Playing = true }: SoundProps) {
  const { camera, } = useThree()
  const soundRef = useRef<THREE.PositionalAudio | null>(null)
  const listenerRef = useRef(new THREE.AudioListener())
  const buffer = useLoader(THREE.AudioLoader, url)
  const meshRef = useRef<THREE.Mesh>(null)

  useEffect(() => {
    camera.add(listenerRef.current)
    return () => {
      camera.remove(listenerRef.current)
    }
  }, [camera])

  useEffect(() => {
    if (buffer && meshRef.current) {
      const sound = new THREE.PositionalAudio(listenerRef.current)
      sound.setBuffer(buffer)
      sound.setRefDistance(10)
      sound.setLoop(true)
      meshRef.current.add(sound)
      soundRef.current = sound

      if (is_Playing) {
        sound.play()
      } else {
        sound.pause()
      }

      return () => {
        if (sound.isPlaying) {
          sound.stop()
        }
        sound.disconnect()
        if (meshRef.current) {
          meshRef.current.remove(sound)
        }
      }
    }
  }, [buffer, is_Playing])

  return (
    <mesh ref={meshRef} position={[0, 3, 0]}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color='red' />
      <positionalAudio ref={soundRef} args={[listenerRef.current]} />
    </mesh>
  )
}

现在尝试创建PeerSound组件，接收WebRTC MediaStream播放空间音频，但玩家远离相机时音量完全没有变化，没有空间音频效果，请问哪里出错了？

import { useEffect, useRef } from 'react'
import { useThree } from '@react-three/fiber'
import * as THREE from 'three'

interface SoundProps {
  stream: MediaStream | null
  is_Playing: boolean
}

export default function PeerSound({ stream, is_Playing = false }: SoundProps) {
  const { camera, scene } = useThree()
  const soundRef = useRef<THREE.PositionalAudio | null>(null)
  const audioListenerRef = useRef(new THREE.AudioListener())
  const audioContextRef = useRef<AudioContext | null>(null)
  const meshRef = useRef<THREE.Mesh>(null)

  useEffect(() => {
    camera.add(audioListenerRef.current)

    return () => {
      camera.remove(audioListenerRef.current)
    }
  }, [camera])

  useEffect(() => {
    if (stream && meshRef.current) {
      if (!audioContextRef.current) {
        audioContextRef.current = new AudioContext()
        console.log('Context', audioContextRef.current.state)
      }
      const audio = new Audio()
      audio.srcObject = stream
      audio.muted = false

      const sound = new THREE.PositionalAudio(audioListenerRef.current)
      sound.setMediaStreamSource(audio.srcObject as MediaStream)
      sound.setRefDistance(1)
      sound.setMaxDistance(5)
      sound.setRolloffFactor(2)

      meshRef.current.add(sound)
      soundRef.current = sound

      audio.onloadedmetadata = () => {
        audio.play()
      }

      return () => {
        sound.disconnect()
        meshRef.current?.remove(sound)
      }
    }
  }, [stream, scene])

  useEffect(() => {
    if (soundRef.current) {
      soundRef.current.setVolume(is_Playing ? 1 : 0)
    }
  }, [is_Playing])

  return (
    <mesh ref={meshRef} castShadow position={[0, 3, 0]} scale={2}>
      <icosahedronGeometry args={[0.3, 1]} />
      <meshStandardMaterial
        flatShading
        color='mediumpurple'
        transparent={true}
      />
      <positionalAudio ref={soundRef} args={[audioListenerRef.current]} />
    </mesh>
  )
}

问题原因及修复方案 #

核心错误点

• 同时使用原生Audio元素和Three.js PositionalAudio：创建原生<audio>并调用audio.play()会绕开Three.js的空间音频处理，直接播放音频，导致距离衰减完全失效。
• 自定义AudioContext与Three.js监听器不兼容：Three.js的AudioListener内部已自带AudioContext，手动创建的独立上下文无法和Three.js的音频管线协同工作。
• 冗余的positionalAudio JSX元素：代码中已手动创建并添加PositionalAudio实例到网格，重复渲染的JSX组件会导致实例冲突。
• 不必要的依赖项：第二个useEffect依赖了scene，但它和音频逻辑无关，会触发不必要的重渲染。

修复后的PeerSound组件代码

import { useEffect, useRef } from 'react'
import { useThree } from '@react-three/fiber'
import * as THREE from 'three'

interface SoundProps {
  stream: MediaStream | null
  is_Playing: boolean
}

export default function PeerSound({ stream, is_Playing = false }: SoundProps) {
  const { camera } = useThree()
  const soundRef = useRef<THREE.PositionalAudio | null>(null)
  const audioListenerRef = useRef(new THREE.AudioListener())
  const meshRef = useRef<THREE.Mesh>(null)

  useEffect(() => {
    camera.add(audioListenerRef.current)
    return () => {
      camera.remove(audioListenerRef.current)
    }
  }, [camera])

  useEffect(() => {
    if (!stream || !meshRef.current) return

    // 直接使用Three.js监听器自带的AudioContext
    const sound = new THREE.PositionalAudio(audioListenerRef.current)
    sound.setMediaStreamSource(stream)
    sound.setRefDistance(1)
    sound.setMaxDistance(5)
    sound.setRolloffFactor(2)
    sound.setVolume(is_Playing ? 1 : 0)

    meshRef.current.add(sound)
    soundRef.current = sound

    return () => {
      if (sound.isPlaying) sound.stop()
      sound.disconnect()
      meshRef.current?.remove(sound)
    }
  }, [stream, is_Playing])

  useEffect(() => {
    if (soundRef.current) {
      soundRef.current.setVolume(is_Playing ? 1 : 0)
    }
  }, [is_Playing])

  return (
    <mesh ref={meshRef} castShadow position={[0, 3, 0]} scale={2}>
      <icosahedronGeometry args={[0.3, 1]} />
      <meshStandardMaterial
        flatShading
        color='mediumpurple'
        transparent={true}
      />
      {/* 移除冗余的positionalAudio组件 */}
    </mesh>
  )
}

关键修复说明

• 移除原生Audio元素，直接通过Three.js的PositionalAudio处理MediaStream，由Three.js接管音频播放和空间效果处理。
• 删除自定义AudioContext，使用AudioListener自带的上下文确保空间音频管线正常运行。
• 移除重复的positionalAudio JSX元素，避免实例冲突。
• 调整依赖项，移除无关的scene参数，减少不必要的重渲染。

内容的提问来源于stack exchange，提问作者N-Box