r3f-xr-widgets / HandleWithAudio

Variable: HandleWithAudio

const HandleWithAudio: ForwardRefExoticComponent<Omit<object & Omit<HandleOptions<unknown>, "handle"> & RefAttributes<HandleStore<unknown>>, "ref"> & RefAttributes<HandleStore<unknown>>>

Defined in: src/components/HandleWithAudio.tsx:137

Handle component wrapper with audio feedback

Drop-in replacement for @react-three/handle's Handle component that adds positional audio feedback when drag interactions start and end. Plays spatial sound effects that are positioned at the handle's 3D location.

Requires the AudioEffects component to be present in the scene to provide the audio sources.

Examples

import { Canvas } from '@react-three/fiber'
import { AudioEffects, HandleWithAudio } from 'r3f-xr-widgets'
import { HandleTarget } from '@react-three/handle'

function App() {
  return (
    <Canvas>
      <AudioEffects />
      <HandleTarget>
        <mesh>
          <boxGeometry />
          <meshStandardMaterial />
        </mesh>
        <HandleWithAudio>
          <mesh position={[0, -0.6, 0]}>
            <sphereGeometry args={[0.1]} />
            <meshStandardMaterial color="hotpink" />
          </mesh>
        </HandleWithAudio>
      </HandleTarget>
    </Canvas>
  )
}

<HandleWithAudio
  apply={(state, target) => {
    // Custom transformation logic
    target.position.copy(state.worldPosition)
    return false // Return false to prevent default apply
  }}
>
  {/* handle visuals */}
</HandleWithAudio>

See

• AudioEffects
• @react-three/handle documentation