关于 threejs-audio
面向实现 three.js 音频功能的开发者和编码 Agent,介绍监听器放置、空间播放、距离衰减、分析器用法及浏览器音频解锁要求。
主要功能
- 01将 AudioListener 附加到相机
- 02配置空间音频播放
- 03设置距离衰减参数
- 04使用 AudioAnalyser
- 05处理 AudioContext 用户手势要求
适用场景
- 01为 three.js 场景添加空间音频
- 02设置声音随距离衰减的方式
- 03根据分析器数据构建音频可视化
- 04处理浏览器中挂起的音频上下文
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ full-stack-skills/ threejs-skills --skill threejs-audio安装后在 Claude Code 中输入/threejs-audio确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
agents/openai.yamlexamples/workflow-positional-audio.mdreferences/official-sections.md详细介绍
何时使用此技能
用户提到以下内容时,始终使用此技能:
AudioListeneronCamera、Audio与PositionalAudio的区别、距离模型、refDistance/maxDistance/rolloff- 用于可视化柱状图或频谱的
AudioAnalyser - 浏览器自动播放策略阻止音频启动
重要:音频与加载器
| 步骤 | 技能 |
|---|---|
| 解码 mp3/ogg 缓冲区 | threejs-loaders(AudioLoader) |
| 空间播放 API | threejs-audio |
触发短语包括:
- "PositionalAudio"、"AudioListener"、"AudioAnalyser"、"panner"
- "空间音频"、"音量衰减"、"频谱"
如何使用此技能
- 将监听器附加到相机对象,使头部相关音频随视角变化。
- 创建上下文,兼容浏览器中通过用户手势解锁的模式。
- PositionalAudio:根据文档设置
refDistance、maxDistance、rolloffFactor、distanceModel。 - 加载缓冲区:通过
AudioLoader(threejs-loaders)加载,然后调用positionalAudio.setBuffer。 - 分析器:按照示例连接
listener.context.createAnalyser()路径;注意性能。 - 更新:除非需要手动跟随移动声源,否则音频节点通常无需逐帧更新。
请参阅 examples/workflow-positional-audio.md。
文档导航(官方)
| 文档部分 | 代表性链接 |
|---|---|
| 音频 | https://threejs.org/docs/AudioListener.html |
| 音频 | https://threejs.org/docs/Audio.html |
| 音频 | https://threejs.org/docs/PositionalAudio.html |
| 音频 | https://threejs.org/docs/AudioAnalyser.html |
扩展列表:references/official-sections.md。
范围
- 范围内: 核心 Audio 类、空间化参数、分析器用法概述。
- 范围外: FMOD/Wwise 风格的创作工具。
常见问题与最佳实践
- 自动播放限制要求用户交互才能恢复 AudioContext。
- 过多的定位音源会增加 CPU 负担——请使用音源池或 LOD 音频。
- 确保世界单位符合距离模型的预期。
文档与版本
音频类位于 three.js 文档的 Audio 部分。解码缓冲区请使用 AudioLoader——参见 threejs-loaders。浏览器 Web Audio 策略属于外部内容,但当 AudioContext 处于挂起状态时必须提及。
Agent 回复检查清单
使用此技能回答时,优先提供以下内容:
- 根据相关性链接到
AudioListener、PositionalAudio或AudioAnalyser。 - 将声音缓冲区文件加载交由 threejs-loaders(
AudioLoader)处理。 - 提及恢复上下文所需的自动播放/用户手势要求。
- 将距离衰减与世界单位及 threejs-objects 的放置方式联系起来。
- 避免承诺 DAW 级混音功能——回答应限于 three.js 音频范围。
参考资料
- https://threejs.org/docs/#Audio
- https://threejs.org/docs/AudioListener.html
- https://threejs.org/docs/PositionalAudio.html
关键词
English: audio、positional audio、listener、analyser、spatial sound、web audio、three.js
中文: 音频、空间音频、AudioListener、PositionalAudio、Web Audio、three.js
评论
支持 Markdown