threejs-impl-audio

Integrate 3D audio in Three.js scenes with AudioListener and AudioAnalyser.

4|Updated Apr 14, 2026
One-click install
npx skills add https://github.com/Bailipa/EZTor_FULLBLOOD --skill threejs-impl-audio-bailipa
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-impl-audio
Source: https://github.com/Bailipa/EZTor_FULLBLOOD/tree/main/.opencode/skills/threejs/threejs-impl/threejs-impl-audio
Command: npx skills add https://github.com/Bailipa/EZTor_FULLBLOOD --skill threejs-impl-audio-bailipa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide helps developers implement and troubleshoot accurate 3D audio in Three.js by detailing how to correctly wire AudioListener to the camera, use Audio and PositionalAudio, and leverage AudioAnalyser while respecting browser autoplay policies.

Core Features & Use Cases

  • Comprehensive coverage of AudioListener, Audio, PositionalAudio, and AudioAnalyser with practical examples.
  • Autoplay policy compliance guidance to ensure audio starts only after user interaction.
  • Spatial audio best practices including distance models, reference distance, and directional cones for realistic sound.
  • Use cases: background music, object-based sound sources, and audio visualization in WebGL scenes.

Quick Start

Add the AudioListener to the camera, load audio with AudioLoader, attach Audio or PositionalAudio to scene objects, and resume the AudioContext on first user interaction before playing.

Frequently Asked Questions about threejs-impl-audio

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add positional audio to a Three.js scene?

To add positional audio in Three.js, attach an AudioListener to your camera and use AudioLoader to load sound files, then create PositionalAudio objects and attach them to specific scene objects for realistic spatial sound placement.

Why does my Three.js audio not play automatically on page load?

Three.js audio fails to autoplay because browser autoplay policies block the Web Audio API AudioContext from starting until a user interacts with the page, requiring you to resume the context on first click or tap.

What is the difference between Audio and PositionalAudio in Three.js?

Three.js Audio plays non-directional background music globally, while PositionalAudio uses distance models, reference distance, and directional cones to simulate spatial sound that changes based on the listener's position.

How do I visualize audio frequencies in a WebGL scene?

You can visualize audio frequencies in a WebGL scene by using the Three.js AudioAnalyser component to extract frequency data from your Audio or PositionalAudio sources and mapping it to visual elements.

Do I need to attach the AudioListener to the camera in Three.js?

Yes, you must attach the AudioListener to the camera in Three.js because the listener's position and orientation define the spatial reference point for calculating positional audio distance and direction.

What are common distance model misconfigurations in Three.js spatial audio?

Common Three.js spatial audio misconfigurations include setting incorrect reference distances, choosing inappropriate distance models, and failing to configure directional cones properly on PositionalAudio objects.