threejs-audio

Q: How do I install threejs-audio?

Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-audio in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-audio/ (personal) or .claude/skills/threejs-audio/ (project).

by full-stack-skillsMedia & Creative

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.

Installs: 370
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

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

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads threejs-audio automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

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, distanceModel per docs.
Load buffer via AudioLoader (threejs-loaders), then positionalAudio.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, or AudioAnalyser as 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

Keywords

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

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

FAQ

What does the threejs-audio skill do?

How do I install threejs-audio?

Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-audio in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-audio/ (personal) or .claude/skills/threejs-audio/ (project).

Which AI agents can use threejs-audio?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is threejs-audio safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains threejs-audio?

It is published by full-stack-skills in full-stack-skills/threejs-skills. It has 370 recorded installs.