A customizable dissolve effect component for React Three Fiber applications
npm install dissolveitbash
npm install dissolveit
`
Features
- Smooth dissolve transitions with customizable parameters
- Support for both fade-in and fade-out animations
- Compatible with any Three.js geometry
- Customizable colors and animation duration
Requirements
This package requires the following peer dependencies:
`json
{
"@react-three/fiber": ">=8.0.0",
"@react-three/drei": ">=9.0.0",
"three": ">=0.150.0",
"react": ">=18.0.0",
"gl-noise": ">=1.6.0",
"maath": ">=0.5.0"
}
`
Basic Usage
`jsx
import { useState } from "react";
import "./App.css";
import { Canvas } from "@react-three/fiber";
import { DissolveEffect } from "dissolveit";
import { OrbitControls } from "@react-three/drei";
import { EffectComposer, Bloom } from "@react-three/postprocessing";
import { Environment } from "@react-three/drei";
function App() {
const [isFading, setIsFading] = useState(true);
return (
style={{ position: "absolute", bottom: 20, left: 20 }}
onClick={() => {
setIsFading(!isFading);
console.log("Is Fading:", !isFading);
}}
>
Toggle Fade
);
}
export default App;
`
Props
| Prop | Type | Default | Description |
| -------------- | ---------------------- | ---------------------- | --------------------------------------------------- |
| geometry | THREE.BufferGeometry | undefined | Optional geometry to use with the effect |
| baseMaterial | THREE.Material | MeshStandardMaterial | Base material to apply the effect to |
| fadeIn | boolean | false | Controls fade-in animation |
| fadeOut | boolean | false | Controls fade-out animation |
| color | string | Required | Color of the dissolve edge effect (e.g., "#FFD700") |
| thickness | number | 0.1 | Thickness of the dissolve edge |
| intensity | number | 50 | Intensity of the edge glow |
| duration | number | 1.2 | Duration of the fade animation in seconds |
| onFadeOut | () => void | undefined | Callback function triggered when fade-out completes |
Advanced Usage
$3
`jsx
import { Canvas } from "@react-three/fiber";
import { EffectComposer, Bloom } from "@react-three/postprocessing";
import { DissolveEffect } from "r3f-dissolve-effect";
function App() {
return (
);
}
``