🌊 Interactive Water Surface shader component for React Three Fiber
A React Three Fiber component for water surface with realistic reflections, with additional interactive FX.
npm i three @react-three/fiber @react-three/drei @funtech-inc/use-shader-fx @types/three
/WaterSurface
directory to your project. Could be done by clone the repo.WaterSurface
|_InteractiveFX
|_Water
|_...
/public
to your /public
./public
|_water
|_fx
Import components from the directory just copied above. There are 2 type of components: WaterSurface & InteractiveFX. All of them are listed below:
WaterSurface type component will be the water shader plane that reflects your scene and apply distortion effects.
⚠️ The implementation is Planar Reflection, therefore it could be expensive in medium and complex scene.
<WaterSurfaceSimple />
Simple water surface using 1 normal map distortion, imported from public/water/simple/waternormals.jpeg
.
This is the three.js Water implementation.
type Props = {
width?: number;
length?: number;
dimensions?: number;
waterColor?: number;
position?: [number, number, number];
distortionScale?: number;
fxDistortionFactor?: number;
fxDisplayColorAlpha?: number;
fxMixColor?: number | string;
children?: React.ReactNode;
};
Complex Water Surface using 2 normal map distortion, imported from public/water/complex/Water_1_M_Normal.jpg
& public/water/complex/Water_2_M_Normal.jpg
.
This is the three.js Water2 implementation.
type Props = {
children?: React.ReactNode;
position?: [number, number, number];
width?: number;
length?: number;
color?: number | string;
scale?: number;
flowDirection?: Vector2 | [number, number];
flowSpeed?: number;
dimensions?: number;
reflectivity?: number;
fxDistortionFactor?: number;
fxDisplayColorAlpha?: number;
};
(Will have support for refraction in near future!)
IntertiveFX type component will be the additional effects apply on the WaterSurface type. This can be added as children component of the WaterSurface component.
<WaterSurfaceComplex>
<FluidFX />
</WaterSurfaceComplex>
Cheap ripple effect using image texture as distortion on water surface.
An implementation of @funtech-inc/use-shader-fx useRipple hook.
type Props = {
frequency?: number;
rotation?: number;
fadeout_speed?: number;
scale?: number;
alpha?: number;
};
Make sure you have smoke.png
at public/fx/smoke.png
first before using this.
Fluid simulation effect with customizable colors that distort water surface reflection.
An implementation of @funtech-inc/use-shader-fx useFluid hook.
type Props = {
densityDissipation?: number;
velocityDissipation?: number;
velocityAcceleration?: number;
pressureDissipation?: number;
splatRadius?: number;
curlStrength?: number;
pressureIterations?: number;
fluidColor?: (velocity: Vector2) => Vector3;
};