npm

r3f-equalizer
TypeScript icon, indicating that this package has built-in type declarations

1.4.2 • Public • Published

@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} />
  </>
}

Readme

Keywords

none

Package Sidebar

Install

npm i r3f-equalizer

Weekly Downloads

2

Version

1.4.2

License

MIT

Unpacked Size

35 kB

Total Files

11

Last publish

Collaborators

  • tiagotrindade