three PositionalAudioHelper

163 阅读3分钟

PositionalAudioHelper 是 Three.js 中的一个帮助类,用于可视化 PositionalAudio 的音频范围。PositionalAudio 是三维空间中的音频对象,它通过位置、距离、方向等参数来控制声音的衰减和传播方向,使得音效具有空间感。

PositionalAudioHelper 有四个属性,两个方法 共有方法属性参见 基类 Object3D。

PositionalAudioHelper( audio : PositionalAudio, range : Number ) audio -- 将会被可视化的PositionalAudio。 range -- (可选)方向锥的范围。 divisionsInnerAngle -- (可选)方向锥内侧部分的分段数。 divisionsOuterAngle -- (可选)方向锥外侧部分的分段数。

    // 创建一个立方体作为参考物体
    const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
    const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    scene.add(cube);

    // 设置音频监听器并添加到摄像机
    const listener = new THREE.AudioListener();
    camera.add(listener);

    // 创建 PositionalAudio 对象并加载音频
    const positionalAudio = new THREE.PositionalAudio(listener);
    // 45 是内角(度数),表示音频的最大音量区域。
    // 90 是外角(度数),表示音频的最大传播范围。
    // 0.1 是外部增益,表示在外角范围内的音量衰减。
    positionalAudio.setDirectionalCone(45, 90, 0.1);
    const audioLoader = new THREE.AudioLoader();
    audioLoader.load('https://www.runoob.com/try/demo_source/horse.mp3', (buffer) => {
        positionalAudio.setBuffer(buffer);
        positionalAudio.setRefDistance(1); // 设置音频起始衰减距离
        positionalAudio.setLoop(true); // 循环播放
        positionalAudio.play(); // 播放音频
    });
    cube.add(positionalAudio); // 将音频添加到立方体上,使它成为音源

    // 使用 PositionalAudioHelper 可视化音频
    const range = 2; // 方向锥的可视化范围
    const divisionsInnerAngle = 8; // 方向锥内角的分段数
    const divisionsOuterAngle = 16; // 方向锥外角的分段数
    const audioHelper = new PositionalAudioHelper(positionalAudio, range, divisionsInnerAngle, divisionsOuterAngle);
    scene.add(audioHelper);

属性

  • audio : PositionalAudio 将会被可视化的PositionalAudio。
  • range : Number 方向锥的范围。
  • divisionsInnerAngle : Number 方向锥内侧部分的分段数。
  • divisionsOuterAngle : Number 方向锥外侧部分的分段数。

方法

  • dispose () : undefined 废置这一辅助对象。
  • update () : undefined 更新这一辅助对象。

在实际使用过程中,如果需要3D立体声音设置为一个物体在场景中这样就可以通过移动场景中的物体实现3D声间的强弱

内容补充: Three.js 在渲染时会动态计算音源物体与监听器之间的距离,从而确定音频的音量。如果距离小于 refDistance,音量不变;如果距离在 refDistancemaxDistance 之间,音量会逐渐衰减;超过 maxDistance 时,声音将完全消失。

在以下代码中,AudioListener 添加到摄像机上,PositionalAudio 附加到一个立方体上。摄像机在场景中移动时,可以观察到音量随距离的变化。当移动立方体时也会对立体声发生变化。

    // 音频监听器
    const listener = new THREE.AudioListener();
    camera.add(listener);  // 将监听器添加到摄像机上 可以将间频监听器添加到任意场景中的物体,当物体移动时,会产生3D立体声音的变化,当物体靠近声源时,就会播放该声源
    // 创建 PositionalAudio 对象
    const positionalAudio = new THREE.PositionalAudio(listener);
    positionalAudio.setRefDistance(1);  // 1米内音量不变
    positionalAudio.setMaxDistance(10); // 10米外声音完全消失
    // 加载音频
    const audioLoader = new THREE.AudioLoader();
    audioLoader.load('https://www.runoob.com/try/demo_source/horse.mp3', (buffer) => {
      positionalAudio.setBuffer(buffer);
      positionalAudio.setLoop(true);
      positionalAudio.play();
    });
    // 创建一个立方体并将 PositionalAudio 添加到其上
    const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
    const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.add(positionalAudio);
    scene.add(cube);