@react-three/fiber equalizer
r3f-equalizer is a 3d audio equalizer for React built using @react-three/fiber.
Quickstart
npm install r3f-equalizer
r3f-equalizer exports a component Equalizer
(as default), this component receives the following properties:
amplitude
(type: number
) — the amplitude of the volume. Default: 1
audio
(type: RefObject<HTMLMediaElement>
) — the HTML element where the audio comes frombackgroundColor
(type: string
) — the color of the background. If it's an empty string, the background will be transparent. Default: ""
cubeSideLength
(type: number
) — the side length of the "dancing cubes". Default: 0.03
cubeSpacing
(type: number
) — the spacing between the cubes. Default: 4.5
cameraFov
(type: number
) — the FOV of the camera. Default: 45
cameraPosition
(type: number[3]
) — the position of the camera in the 3d space (which the center is [0, 0, 0]
). Default: [0, 5, 15]
gridCols
(type: number
) — the number of columns of the "dancing cubes" grid. Default: 80
gridRows
(type: number
) — the number of rows of the "dancing cubes" grid. Default: 12
onCreatedCallback
(type: function
) — function called after the canvas is created. Default: () => {}
Example
import React, { useEffect, useRef } from "react"
import Equalizer from "r3f-equalizer"
function App() {
const audioRef = useRef()
return <>
<audio ref={audioRef} src="..." />
<Equalizer amplitude={5} audio={audioRef} />
</>
}