React-three实现3D游戏(三)-空间音频

在一个基本的可交互的3D游戏中,人物和环境是不可或缺的元素。接下来,我们将逐步迭代我们的项目,使其更像一个真正的可交互的3D游戏。

React-three实现3D游戏(三)-空间音频
3D模型在线预览提供多种低代码平台3D模型在线预览解决方案,实现了将多种3D模型格式无缝集成到低代码业务表单中。这意味着用户可以在不离开低代码平台的情况下,直接查看和操作3D模型,极大地提升了数据可视化的效果和用户交互体验。

空间音频概述

空间音频,故名思意就是指放置在3d空间场景中的音源,拥有现实中立体声音的特性。 它远小近大,且会被墙壁等障碍物所阻隔。

对于一个立体的游戏世界来说是十分重要的元素,试想在吃鸡类游戏中不能听到逐渐靠近的脚步声,游戏的临场感和现实感就大打折扣!

这是threejs官网的一个示例:link,它很好的表现了空间音频的特性。

核心代码:

你可以看到,它创建了一个“耳朵”(listener)并绑定到了相机上,并将audio元素加载的音频资源加载到positionalAudio。这样当音频播放时,相机这个听众就会因为方位和远近的不同听到不同的音乐效果。也就是所谓的立体音效。

react-three中使用空间音频

react-three/drei 工具库中封装了 PositionalAudio组件专门用来在场景中放置空间音频。它只是对原生three中的PositionalAudio的封装,它支持所有原生的api。
它做了以下事情:

  1. PositionalAudio被创建后就自动将listener加入到camera了,你不需要显示的创建AudioListener并加入camera中。
  2. 自动创建audio元素加载并播放音频文件,你不需要显示的创建。

你可以直接把PositionalAudio 放到某个网格或模型中,它会与其在空间上绑定。

这是react-three/drei的官方示例:

项目中添加音乐与音效

添加全局音频

所谓全局音频,是指不需要空间效果的音频,也就是我们在网页中正常看到的音频。它不随着人物的空间变化而变化,但可以在设置中更改音量的大小,如背景音乐等。
这里我们有2个选择:

  1. 使用空间音频,将此音频绑定在人物身上,类似自带音响的效果。
  2. 使用正常的audio标签,在网页上播放。

大家可以自行选择,这里我为了一致性使用空间音频。 从网站上寻找到合适的bgm和脚本音效,放入public目录下的audios文件夹中。 修改代码如下:

空间音频失效问题

正常的PositionAudio,会将listener自动添加到camera。随着camera方位的变化听到的音效随之变化。

可Ecctrl库将原来的camera位置始终锁定在[0,0,0]的位置。这导致空间音频功能失效。

我在github上我提出这个issue后。 作者提供的解决方案是重新添加listener,正如上面代码中我将listener添加到了玩家身上。这样随着玩家的移动,空间音频再次生效。

添加环境音效

大家可以自行从网站上寻找到合适的音效,这里我共找了2种环境音效:沙滩边的海浪声、森林的鸟叫声。

将音频资源放入根目录public文件夹下的audios文件夹中。 在models文件夹下新建ambiance.tsx文件,用于存放所有的环境音。

附具体代码如下:

基本使用方式与示例无异。这里我多添加了一个球体网格,并设为透明度0.5,用来查看音源的位置和影响范围,方便调试其位置。

添加了debug参数用来控制球体网格的可见。 你可以更改meshStandardMaterial的color属性,让不同的音源有不同的颜色,更方便调试。

你也可以尝试使用原生three提供的 PositionalAudioHelper 用来辅助调试空间音频。

组件挂载

在models下的index.tsx中挂载组件

React-three实现3D游戏 - 索引

React-three实现3D游戏(一)-模型替换

React-three实现3D游戏(二)-模型替换

React-three实现3D游戏(三)-空间音频

React-three实现3D游戏(四)-海洋、天空和云雾

React-three实现3D游戏(五)-小地图

React-three实现3D游戏(六)-小地图

React-three实现3D游戏(七)-多人同屏

React-three实现3D游戏(八)-第一视角

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号