threejs-impl-audio

Implements background music, 3D spatial audio, and audio visualization in Three.js scenes.

1|Updated Aug 20, 2023
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-impl-audio-imanlangaran
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-impl-audio
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/threejs-impl-audio
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-impl-audio-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes references (resource) components.

What problem does it solve? Adding sound to a Three.js scene fails silently when developers ignore browser autoplay policies, forget to attach the AudioListener to the camera, or choose the wrong distance model for spatial audio. This Skill provides correct patterns for AudioListener, Audio, PositionalAudio, AudioLoader, and AudioAnalyser so audio works on the first attempt. ## Core Features & Use Cases - Autoplay-Compliant Playback: Resume the AudioContext inside a user interaction handler before calling play(), avoiding silent browser blocking. - 3D Spatial Audio: Attach PositionalAudio to meshes with correct distance models (inverse, linear, exponential), rolloff factors, and directional cones. - Audio Visualization: Drive meshes from real-time frequency data using AudioAnalyser with proper fftSize configuration. - Use Case: Build a 3D product showcase where background music starts after the user's first click, a positional engine sound follows a moving car mesh, and frequency bars pulse to the beat. ## Quick Start Add background music and a positional sound effect to my Three.js scene that starts playing after the user's first click.

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 background music to a Three.js scene?

Create one AudioListener attached to the camera, then create a THREE.Audio instance and load a file with AudioLoader. Call play() only inside a user interaction handler after resuming the AudioContext, since browsers suspend audio until a user gesture.

How to use PositionalAudio for 3D spatial sound in Three.js?

Create a PositionalAudio with the shared listener, set its buffer via AudioLoader, configure refDistance, rolloffFactor, and a distance model, then add it as a child of the target mesh. Volume and panning update automatically as the camera moves.

Why is my Three.js audio not playing in the browser?

Browsers suspend the AudioContext until a user gesture occurs, so play() called before interaction fails silently. Resume listener.context inside a click or keypress handler, and check sound.isPlaying before calling play() again.

Which distance model should I use for PositionalAudio?

Use 'inverse' for realistic gradual falloff that never reaches zero, 'linear' when you need a hard cutoff at maxDistance, and 'exponential' for steep close-versus-far contrast. Note that maxDistance only affects the linear model.

Can I stream large audio files in Three.js instead of preloading?

Yes, use setMediaElementSource() with an HTML5 audio element so the file streams rather than fully loading into an AudioBuffer. Control playback through the HTML element's play() and pause() methods, not sound.play().

How do I visualize audio frequency data in Three.js?

Wrap an Audio instance with AudioAnalyser using a power-of-two fftSize, then call getFrequencyData() each frame to get a Uint8Array of bin magnitudes from 0 to 255. Use those values to scale meshes or drive other visual properties.