mcpField
T
threejs-audio

threejs-audio

github.com/full-stack-skillsDevelopment10348 installsUpdated 4w ago
Repository

About threejs-audio

A skill for developers and coding agents implementing three.js audio. It explains listener placement, spatial playback, distance attenuation, analyser use, and browser audio unlock requirements.

Key features

  1. 01AudioListener attachment to camera
  2. 02Positional audio configuration
  3. 03Distance attenuation parameters
  4. 04AudioAnalyser usage
  5. 05AudioContext user-gesture handling

Use cases

  1. 01Adding spatial sound to a three.js scene
  2. 02Setting how sound fades with distance
  3. 03Building audio visualizations from analyser data
  4. 04Addressing suspended audio contexts in browsers

Install

Copy the command and run it in a terminal.

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

After installing, type/threejs-audioin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project README

When to use this skill

ALWAYS use this skill when the user mentions:

  • AudioListener on Camera, Audio vs PositionalAudio, distance models, refDistance/maxDistance/rolloff
  • AudioAnalyser for visualization bars/spectrum
  • Browser autoplay policies blocking audio start

IMPORTANT: audio vs loaders

StepSkill
Decode mp3/ogg bufferthreejs-loaders (AudioLoader)
Spatial playback APIthreejs-audio

Trigger phrases include:

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

How to use this skill

  1. Attach listener to camera object so head-related audio follows view.
  2. Create context compatible with user gesture unlock patterns in browsers.
  3. PositionalAudio: set refDistance, maxDistance, rolloffFactor, distanceModel per docs.
  4. Load buffer via AudioLoader (threejs-loaders), then positionalAudio.setBuffer.
  5. Analyser: connect graph listener.context.createAnalyser() pathways per examples; watch performance.
  6. Update: audio nodes usually need no per-frame update unless following moving sources manually.

See examples/workflow-positional-audio.md.

Doc map (official)

Docs sectionRepresentative links
Audiohttps://threejs.org/docs/AudioListener.html
Audiohttps://threejs.org/docs/Audio.html
Audiohttps://threejs.org/docs/PositionalAudio.html
Audiohttps://threejs.org/docs/AudioAnalyser.html

Extended list: references/official-sections.md.

Scope

  • In scope: Core Audio classes, spatialization parameters, analyser usage overview.
  • Out of scope: FMOD/Wwise-style authoring tools.

Common pitfalls and best practices

  • Autoplay restrictions require user interaction to resume AudioContext.
  • Too many positional sources hurt CPU—pool or LOD audio.
  • Ensure world units match distance model expectations.

Documentation and version

Audio classes are under Audio in three.js docs. Decoding buffers uses AudioLoader—see threejs-loaders. Browser Web Audio policies are external but must be mentioned when AudioContext is suspended.

Agent response checklist

When answering under this skill, prefer responses that:

  1. Link AudioListener, PositionalAudio, or AudioAnalyser as relevant.
  2. Delegate file loading of sound buffers to threejs-loaders (AudioLoader).
  3. Note autoplay / user-gesture requirements for resuming context.
  4. Relate distance attenuation to world units and threejs-objects placement.
  5. Avoid promising DAW-level mixing—stay within three.js audio scope.

References

Keywords

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

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

Comments

Markdown supported