mcpField
T
threejs-audio

threejs-audio

github.com/full-stack-skills开发10348 次安装4 周前更新
代码仓库

关于 threejs-audio

面向实现 three.js 音频功能的开发者和编码 Agent,介绍监听器放置、空间播放、距离衰减、分析器用法及浏览器音频解锁要求。

主要功能

  1. 01将 AudioListener 附加到相机
  2. 02配置空间音频播放
  3. 03设置距离衰减参数
  4. 04使用 AudioAnalyser
  5. 05处理 AudioContext 用户手势要求

适用场景

  1. 01为 three.js 场景添加空间音频
  2. 02设置声音随距离衰减的方式
  3. 03根据分析器数据构建音频可视化
  4. 04处理浏览器中挂起的音频上下文

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-audio

安装后在 Claude Code 中输入/threejs-audio确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

agents/
openai.yaml
examples/
workflow-positional-audio.md
references/
official-sections.md

详细介绍

何时使用此技能

用户提到以下内容时,始终使用此技能:

  • AudioListener on Camera、Audio 与 PositionalAudio 的区别、距离模型、refDistance/maxDistance/rolloff
  • 用于可视化柱状图或频谱的 AudioAnalyser
  • 浏览器自动播放策略阻止音频启动

重要:音频与加载器

步骤技能
解码 mp3/ogg 缓冲区threejs-loaders(AudioLoader)
空间播放 APIthreejs-audio

触发短语包括:

  • "PositionalAudio"、"AudioListener"、"AudioAnalyser"、"panner"
  • "空间音频"、"音量衰减"、"频谱"

如何使用此技能

  1. 将监听器附加到相机对象,使头部相关音频随视角变化。
  2. 创建上下文,兼容浏览器中通过用户手势解锁的模式。
  3. PositionalAudio:根据文档设置 refDistance、maxDistance、rolloffFactor、distanceModel。
  4. 加载缓冲区:通过 AudioLoader(threejs-loaders)加载,然后调用 positionalAudio.setBuffer。
  5. 分析器:按照示例连接 listener.context.createAnalyser() 路径;注意性能。
  6. 更新:除非需要手动跟随移动声源,否则音频节点通常无需逐帧更新。

请参阅 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 回复检查清单

使用此技能回答时,优先提供以下内容:

  1. 根据相关性链接到 AudioListener、PositionalAudio 或 AudioAnalyser。
  2. 将声音缓冲区文件加载交由 threejs-loaders(AudioLoader)处理。
  3. 提及恢复上下文所需的自动播放/用户手势要求。
  4. 将距离衰减与世界单位及 threejs-objects 的放置方式联系起来。
  5. 避免承诺 DAW 级混音功能——回答应限于 three.js 音频范围。

参考资料

关键词

English: audio、positional audio、listener、analyser、spatial sound、web audio、three.js

中文: 音频、空间音频、AudioListener、PositionalAudio、Web Audio、three.js

评论

支持 Markdown