skillZs
★ LIVE SKILL TAGS ★
>>> LIVE SKILLS INDEX <<<
* OPEN SOURCE *
NO LOGIN, NO TRACKING
※ REAL INSTALL DATA ※
← back to all skills
full-stack-skills/threejs-skills274 installs

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-audio
view source ↗

Is 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:

  • 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

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>