react-three-fiber drei 中的交互式 PositionalAudio 组件答案

【问题标题】：Interactive PositionalAudio component in react-three-fiber dreireact-three-fiber drei 中的交互式 PositionalAudio 组件
【发布时间】：2023-02-01 11:32:13
【问题描述】：

我正在制作一个 3D 网站，并试图通过使用 react-three-fiber drei 来使用 PositionalAudio 放置音频。但由于谷歌新的自动播放政策，它不起作用。所以我需要使用 PositionalAudio 组件和一个播放/停止按钮来播放我的网站音乐，该按钮可以根据用户的命令播放和停止音乐。那么有没有办法在react-three-fiber drei中使用PositionalAudio组件做一个交互式音频播放器呢？

【问题讨论】：

标签： reactjs react-three-fiber react-three-drei

【解决方案1】：

你必须为它设置一些触发器。我通过有条件地用状态渲染它来修复我的。

<Suspense>
    <mesh position={[0, 0, 0]}>
      <boxBufferGeometry attach="geometry" args={[0.1, 0.1, 0.1]} />
      <meshStandardMaterial color="red" />
      {musicZoom && (
        <PositionalAudio autoplay loop = {false} url="/discoSite.mp3" distance={3} />
      )}
    </mesh>
  </Suspense>

【讨论】：