r3f-equalizer is a 3d audio equalizer for React built using [@react-three/fiber](https://github.com/pmndrs/react-three-fiber).
r3f-equalizer is a 3d audio equalizer for React built using @react-three/fiber.
``bash`
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: 1audio
- (type: RefObject) — 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.03cubeSpacing
- (type: number) — the spacing between the cubes. Default: 4.5cameraFov
- (type: number) — the FOV of the camera. Default: 45cameraPosition
- (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: 80gridRows
- (type: number) — the number of rows of the "dancing cubes" grid. Default: 12onCreatedCallback
- (type: function) — function called after the canvas is created. Default: () => {}
jsx
import React, { useEffect, useRef } from "react"
import Equalizer from "r3f-equalizer"function App() {
const audioRef = useRef()
return <>
>
}
``