react-mirrorball-3d

A reusable 3D disco ball React component powered by Three.js and @react-three/fiber.

Installation

npm install react-mirrorball-3d

Usage

import { MirrorBall } from 'react-mirrorball-3d';

function App() {
  return (
    <Canvas camera={{ position: [0, 0, 2.5], fov: 50 }}>
      <ambientLight intensity={0.7} />
      <directionalLight position={[2, 4, 2]} intensity={1.2} castShadow />
      <MirrorBall radius={0.62} rotationSpeed={0.32} envIntensity={1.5} />
    </Canvas>
  );
}

Props

| Prop | Type | Default | Description | | -------------- | ------- | ------- | ------------------------------------------- | | radius | number | 0.62 | Sphere radius | | rotationSpeed| number | 0.32 | Rotation speed (radians/sec) | | envIntensity | number | 1.5 | Reflection intensity |

Requirements

• React >=17
• Three.js >=0.150
• @react-three/fiber >=7

Example

See the included MirrorBall.jsx for usage. You must use this component inside a <Canvas> from @react-three/fiber.

License

MIT