React Three Fiber Dissolve Effect

A customizable dissolve effect component for React Three Fiber applications, featuring noise-based transitions with glowing edges.

Installation

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:

{
  "@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

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 (
    <div className="app">
      <Canvas camera={{ position: [3, 3, 5], fov: 42 }}>
        <color attach="background" args={["#ececec"]} />
        <OrbitControls />
        <ambientLight />
        {/* <spotLight position={[10, 10, 10]} /> */}
        <Environment preset="sunset" />
        <EffectComposer>
          <Bloom luminanceThreshold={2} intensity={1.25} mipmapBlur />
        </EffectComposer>

        <mesh position={[0, 0, 0]}>
          <boxGeometry args={[1, 1, 1]} />
          <DissolveEffect
            fadeIn={isFading}
            fadeOut={!isFading}
            color="#FFD700"
            thickness={0.1}
            intensity={10}
          />
        </mesh>
      </Canvas>
      <button
        style={{ position: "absolute", bottom: 20, left: 20 }}
        onClick={() => {
          setIsFading(!isFading);
          console.log("Is Fading:", !isFading);
        }}
      >
        Toggle Fade
      </button>
    </div>
  );
}

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

With Post-Processing

import { Canvas } from "@react-three/fiber";
import { EffectComposer, Bloom } from "@react-three/postprocessing";
import { DissolveEffect } from "r3f-dissolve-effect";

function App() {
  return (
    <Canvas>
      <EffectComposer>
        <Bloom luminanceThreshold={2} intensity={1.25} mipmapBlur />
      </EffectComposer>
      <mesh>
        <boxGeometry />
        <DissolveEffect fadeIn={true} color="#FFD700" />
      </mesh>
    </Canvas>
  );
}

Demonstration site

Demo

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Credits

Built with React Three Fiber and Three.js.

Support

For issues and feature requests, please use the GitHub issue tracker.