1.3.2 • Published 6 months ago
@whatisjery/react-fluid-distortion v1.3.2
Fluid Distortion for React Three Fiber
Implementing post-processing fluid distortion effects in response to cursor interactions for React-Three-Fiber. Based on the shaders developed by Pavel Dobryakov
Try it :
Installation :
npm install @whatisjery/react-fluid-distortion @react-three/drei @react-three/postprocessing postprocessing leva
Example of use :
import { Fluid } from '@/whatisjery/react-fluid-distortion';
import { EffectComposer } from '@react-three/postprocessing';
import { Canvas } from '@react-three/fiber';
<Canvas
style={{
position: 'fixed',
top: 0,
left: 0,
height: '100vh',
width: '100vw',
background: '#000000',
}}>
<EffectComposer>
<Fluid />
{... other effets}
</EffectComposer>
</Canvas>;
Display configuration panel :
Show a debug panel to test options more easily.
const config = useConfig();
...
<Fluid {...config} />
Options :
Name | Type | Default Value | Description |
---|---|---|---|
fluidColor | hexadecimal | #005eff | Sets the fluid color. Effective only when rainbow is set to false . |
backgroundColor | string | #070410 | Sets the background color. Effective only when showBackground is true . |
showBackground | boolean | false | Toggles the background color's visibility. If false it becomes transprent. |
blend | number | 5 | Blends fluid into the scene when showBackground is true. Valid range: 0.00 to 10.0 . |
intensity | number | 10 | Sets the fluid intensity. Valid range: 0 to 10 . |
force | number | 2 | Multiplies the mouse velocity to increase fluid splatter. Valid range: 0.0 to 20 . |
distortion | number | 2 | Sets the distortion amount. Valid range: 0.00 to 2.00 . |
radius | number | 0.3 | Sets the fluid radius. Valid range: 0.01 to 1.00 . |
curl | number | 10 | Sets the amount of the curl effect. Valid range: 0.0 to 50 . |
swirl | number | 20 | Sets the amount of the swirling effect. Valid range: 0 to 20 . |
velocityDissipation | number | 0.99 | Reduces the fluid velocity over time. Valid range: 0.00 to 1.00 . |
densitionDissipation | number | 0.95 | Reduces the fluid density over time. Valid range: 0.00 to 1.00 . |
pressure | number | 0.80 | Controls the reduction of pressure. Valid range: 0.00 to 1.00 . |
rainbow | boolean | true | Activates color mode based on mouse direction. No range applicable as this is a boolean value. |
1.3.2
6 months ago
1.3.1
7 months ago
1.3.0
7 months ago
1.2.0
7 months ago
1.1.0
7 months ago
0.1.0
7 months ago
1.0.12
7 months ago
1.0.11
7 months ago
1.0.10
7 months ago
1.0.9
7 months ago
1.0.8
7 months ago
1.0.7
7 months ago
1.0.6
7 months ago
1.0.5
7 months ago
1.0.4
7 months ago
1.0.3
7 months ago
1.0.2
7 months ago
1.0.1
7 months ago
1.0.0
7 months ago
0.0.3
7 months ago
0.0.2
7 months ago
0.0.1
7 months ago