Listener

The listener represents the position and orientation of the player. Three Steam Audio uses the listener transform when spatializing sources, running occlusion rays, and simulating reflections.

Updating the listener

The world exposes a single listener through world.listener. Update it each frame before calling world.step(delta).

Three.js
React Three Fiber

import { 
const createWorld: (options: WorldOptions) => Promise<World>
createWorld } from 'three-steam-audio'
import { 
class Vector3
3D vector.
see
https://github.com/mrdoob/three.js/blob/master/src/math/Vector3.js
@example const a = new THREE.Vector3( 1, 0, 0 );
const b = new THREE.Vector3( 0, 1, 0 );
const c = new THREE.Vector3();
c.crossVectors( a, b );
Vector3, 
class Quaternion
Implementation of a quaternion. This is used for rotating things without incurring in the dreaded gimbal lock issue, amongst other advantages.
@example const quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.PI / 2 );
const vector = new THREE.Vector3( 1, 0, 0 );
vector.applyQuaternion( quaternion );
Quaternion } from 'three'

const 
const world: World
world = await 
function createWorld(options: WorldOptions): Promise<World>
createWorld({ 
WorldOptions.audioContext: AudioContext
audioContext: new 
var AudioContext: new (contextOptions?: AudioContextOptions) => AudioContext
The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an AudioNode.
MDN Reference
AudioContext() })

const 
const animate: () => void
animate = () => {
  
function requestAnimationFrame(callback: FrameRequestCallback): number
MDN Reference
requestAnimationFrame(
const animate: () => void
animate)

  
const world: World
world.
listener: Listener
listener.
Listener.setPosition: (position: Vector3Like) => void
setPosition(
const camera: {
    position: Vector3;
    quaternion: Quaternion;
}
camera.
position: Vector3
position)
  
const world: World
world.
listener: Listener
listener.
Listener.setOrientation: (orientation: QuaternionLike) => void
setOrientation(
const camera: {
    position: Vector3;
    quaternion: Quaternion;
}
camera.
quaternion: Quaternion
quaternion)

  
const world: World
world.
function step(delta: number): void
step(1 / 60)
}

const animate: () => void
animate()

import { 
const Suspense: ExoticComponent<SuspenseProps>
Lets you display a fallback until its children have finished loading.
@see ― https://react.dev/reference/react/Suspense React Docs
@example 
import { Suspense } from 'react';

<Suspense fallback={<Loading />}>
  <ProfileDetails />
</Suspense>
Suspense, 
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version ― 16.8.0
@see ― https://react.dev/reference/react/useState
useState } from 'react'
import { 
function Canvas(props: CanvasProps): import("react").JSX.Element
A DOM canvas which accepts threejs elements as children.
@see ― https://docs.pmnd.rs/react-three-fiber/api/canvas
Canvas } from '@react-three/fiber'
import {
  
const SteamAudio: (props: SteamAudioProps) => import("react").JSX.Element
SteamAudio,
  
const SteamAudioListener: ({ object }: SteamAudioListenerProps) => null
SteamAudioListener,
} from 'three-steam-audio/react'

export const 
const App: () => JSX.Element
App = () => {
  const [
const audioContext: AudioContext
audioContext] = 
useState<AudioContext>(initialState: AudioContext | (() => AudioContext)): [AudioContext, Dispatch<SetStateAction<AudioContext>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version ― 16.8.0
@see ― https://react.dev/reference/react/useState
useState(() => new 
var AudioContext: new (contextOptions?: AudioContextOptions) => AudioContext
The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an AudioNode.
MDN Reference
AudioContext())

  return (
    <
function Canvas(props: CanvasProps): import("react").JSX.Element
A DOM canvas which accepts threejs elements as children.
@see ― https://docs.pmnd.rs/react-three-fiber/api/canvas
Canvas>
      <
const Suspense: ExoticComponent<SuspenseProps>
Lets you display a fallback until its children have finished loading.
@see ― https://react.dev/reference/react/Suspense React Docs
@example 
import { Suspense } from 'react';

<Suspense fallback={<Loading />}>
  <ProfileDetails />
</Suspense>
Suspense 
SuspenseProps.fallback?: ReactNode
A fallback react tree to show when a Suspense child (like React.lazy) suspends
fallback={null}>
        <
const SteamAudio: (props: SteamAudioProps) => import("react").JSX.Element
SteamAudio 
audioContext: AudioContext
audioContext={
const audioContext: AudioContext
audioContext}>
          <
const SteamAudioListener: ({ object }: SteamAudioListenerProps) => null
SteamAudioListener />
          {/* scene contents */}
        </
const SteamAudio: (props: SteamAudioProps) => import("react").JSX.Element
SteamAudio>
      </
const Suspense: ExoticComponent<SuspenseProps>
Lets you display a fallback until its children have finished loading.
@see ― https://react.dev/reference/react/Suspense React Docs
@example 
import { Suspense } from 'react';

<Suspense fallback={<Loading />}>
  <ProfileDetails />
</Suspense>
Suspense>
    </
function Canvas(props: CanvasProps): import("react").JSX.Element
A DOM canvas which accepts threejs elements as children.
@see ― https://docs.pmnd.rs/react-three-fiber/api/canvas
Canvas>
  )
}

<SteamAudioListener> automatically synchronizes the R3F camera (or a custom object provided via the object prop) to world.listener each frame. Only one listener may be mounted per <SteamAudio> context.

Listener reverb

When reflections are enabled, you can ask the simulator to compute listener-centric reverb. This is useful for applying ambient reverberation to parts of your mix.

Three.js
React Three Fiber

import { 
const createWorld: (options: WorldOptions) => Promise<World>
createWorld } from 'three-steam-audio'

const world: World
world.
listener: Listener
listener.
Listener.setReverb: (settings: false | ReverbSettings) => void
setReverb({
  
ReverbSettings.enabled?: boolean | undefined
enabled: true,
  
ReverbSettings.reverbScale?: ThreeBand | undefined
reverbScale: [1.8, 1.6, 1.3],
})

// Disable reverb later:
const world: World
world.
listener: Listener
listener.
Listener.setReverb: (settings: false | ReverbSettings) => void
setReverb(false)

import { 
const Suspense: ExoticComponent<SuspenseProps>
Lets you display a fallback until its children have finished loading.
@see ― https://react.dev/reference/react/Suspense React Docs
@example 
import { Suspense } from 'react';

<Suspense fallback={<Loading />}>
  <ProfileDetails />
</Suspense>
Suspense, 
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version ― 16.8.0
@see ― https://react.dev/reference/react/useState
useState } from 'react'
import { 
function Canvas(props: CanvasProps): import("react").JSX.Element
A DOM canvas which accepts threejs elements as children.
@see ― https://docs.pmnd.rs/react-three-fiber/api/canvas
Canvas } from '@react-three/fiber'
import {
  
const SteamAudio: (props: SteamAudioProps) => import("react").JSX.Element
SteamAudio,
  
const SteamAudioEnvironment: ({ children, destination, reflections, reverb }: SteamAudioEnvironmentProps) => import("react").JSX.Element
SteamAudioEnvironment,
  
const SteamAudioListener: ({ object }: SteamAudioListenerProps) => null
SteamAudioListener,
} from 'three-steam-audio/react'

export const 
const App: () => JSX.Element
App = () => {
  const [
const audioContext: AudioContext
audioContext] = 
useState<AudioContext>(initialState: AudioContext | (() => AudioContext)): [AudioContext, Dispatch<SetStateAction<AudioContext>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version ― 16.8.0
@see ― https://react.dev/reference/react/useState
useState(() => new 
var AudioContext: new (contextOptions?: AudioContextOptions) => AudioContext
The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an AudioNode.
MDN Reference
AudioContext())

  return (
    <
function Canvas(props: CanvasProps): import("react").JSX.Element
A DOM canvas which accepts threejs elements as children.
@see ― https://docs.pmnd.rs/react-three-fiber/api/canvas
Canvas>
      <
const Suspense: ExoticComponent<SuspenseProps>
Lets you display a fallback until its children have finished loading.
@see ― https://react.dev/reference/react/Suspense React Docs
@example 
import { Suspense } from 'react';

<Suspense fallback={<Loading />}>
  <ProfileDetails />
</Suspense>
Suspense 
SuspenseProps.fallback?: ReactNode
A fallback react tree to show when a Suspense child (like React.lazy) suspends
fallback={null}>
        <
const SteamAudio: (props: SteamAudioProps) => import("react").JSX.Element
SteamAudio
          
audioContext: AudioContext
audioContext={
const audioContext: AudioContext
audioContext}
          
options?: Omit<WorldOptions, "audioContext"> | undefined
options={{ 
reflections?: false | {
    diffuseSamples?: number;
    maxDuration?: number;
    maxOrder?: number;
    maxRays?: number;
} | undefined
reflections: { 
maxRays?: number | undefined
maxRays: 4096 } }}
        >
          <
const SteamAudioListener: ({ object }: SteamAudioListenerProps) => null
SteamAudioListener />
          <
const SteamAudioEnvironment: ({ children, destination, reflections, reverb }: SteamAudioEnvironmentProps) => import("react").JSX.Element
SteamAudioEnvironment
            
SteamAudioEnvironmentProps.reverb?: false | (ReverbBusSettings & ReverbSettings) | undefined
reverb={{ 
ReverbSettings.reverbScale?: ThreeBand | undefined
reverbScale: [1.8, 1.6, 1.3], 
ReverbBusSettings.wet?: number | undefined
wet: 1 }}
          >
            {/* scene contents */}
          </
const SteamAudioEnvironment: ({ children, destination, reflections, reverb }: SteamAudioEnvironmentProps) => import("react").JSX.Element
SteamAudioEnvironment>
        </
const SteamAudio: (props: SteamAudioProps) => import("react").JSX.Element
SteamAudio>
      </
const Suspense: ExoticComponent<SuspenseProps>
Lets you display a fallback until its children have finished loading.
@see ― https://react.dev/reference/react/Suspense React Docs
@example 
import { Suspense } from 'react';

<Suspense fallback={<Loading />}>
  <ProfileDetails />
</Suspense>
Suspense>
    </
function Canvas(props: CanvasProps): import("react").JSX.Element
A DOM canvas which accepts threejs elements as children.
@see ― https://docs.pmnd.rs/react-three-fiber/api/canvas
Canvas>
  )
}

See Reflections and Reverb for how to render reverb through a ReverbBusNode.