@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 from
• backgroundColor (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} />
  </>
}