A React Three Fiber component for water surface, with additional interactive FX.

1. Make sure you have all dependencies installed first:

npm i three @react-three/fiber @funtech-inc/use-shader-fx @types/three

2. Then copy/download the /WaterSurface directory to your project

WaterSurface
|_InteractiveFX
|_Water
|_...

3. Copy/Download assets files in /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.

<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;
};