threejs-audio
three.js audio spatialization: AudioListener attached to camera rig, Audio and PositionalAudio sources, AudioAnalyser for FFT/time-domain data, and integration with Web Audio API contexts; AudioLoader is referenced from threejs-loaders for file decoding. Use when placing 3D sound, configuring panner parameters, or visualization; not a replacement for full game audio middleware.
How do I install this agent skill?
npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-audioIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill provides documentation, architectural guidance, and code examples for Three.js audio spatialization features. All external references point to the official threejs.org documentation and no security risks were identified.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
What does this agent skill do?
When to use this skill
ALWAYS use this skill when the user mentions:
AudioListeneronCamera,AudiovsPositionalAudio, distance models, refDistance/maxDistance/rolloffAudioAnalyserfor visualization bars/spectrum- Browser autoplay policies blocking audio start
IMPORTANT: audio vs loaders
| Step | Skill |
|---|---|
| Decode mp3/ogg buffer | threejs-loaders (AudioLoader) |
| Spatial playback API | threejs-audio |
Trigger phrases include:
- "PositionalAudio", "AudioListener", "AudioAnalyser", "panner"
- "空间音频", "音量衰减", "频谱"
How to use this skill
- Attach listener to camera object so head-related audio follows view.
- Create context compatible with user gesture unlock patterns in browsers.
- PositionalAudio: set
refDistance,maxDistance,rolloffFactor,distanceModelper docs. - Load buffer via
AudioLoader(threejs-loaders), thenpositionalAudio.setBuffer. - Analyser: connect graph
listener.context.createAnalyser()pathways per examples; watch performance. - Update: audio nodes usually need no per-frame update unless following moving sources manually.
See examples/workflow-positional-audio.md.
Doc map (official)
| Docs section | Representative links |
|---|---|
| Audio | https://threejs.org/docs/AudioListener.html |
| Audio | https://threejs.org/docs/Audio.html |
| Audio | https://threejs.org/docs/PositionalAudio.html |
| Audio | https://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:
- Link
AudioListener,PositionalAudio, orAudioAnalyseras relevant. - Delegate file loading of sound buffers to threejs-loaders (
AudioLoader). - Note autoplay / user-gesture requirements for resuming context.
- Relate distance attenuation to world units and threejs-objects placement.
- Avoid promising DAW-level mixing—stay within three.js audio scope.
References
- https://threejs.org/docs/#Audio
- https://threejs.org/docs/AudioListener.html
- https://threejs.org/docs/PositionalAudio.html
Keywords
English: audio, positional audio, listener, analyser, spatial sound, web audio, three.js
中文: 音频、空间音频、AudioListener、PositionalAudio、Web Audio、three.js
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/full-stack-skills/threejs-skills/threejs-audio">View threejs-audio on skillZs</a>