https://github.com/nhtoby311/WaterSurface
🌊 Interactive Water Surface shader component for React Three Fiber
https://github.com/nhtoby311/WaterSurface
react-three-fiber webgl
Last synced: 5 months ago
JSON representation
🌊 Interactive Water Surface shader component for React Three Fiber
- Host: GitHub
- URL: https://github.com/nhtoby311/WaterSurface
- Owner: nhtoby311
- Created: 2024-03-05T11:34:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-06T09:43:28.000Z (about 1 year ago)
- Last Synced: 2024-08-10T14:21:22.719Z (9 months ago)
- Topics: react-three-fiber, webgl
- Language: TypeScript
- Homepage: https://water-surface.vercel.app
- Size: 8.05 MB
- Stars: 72
- Watchers: 1
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Interactive Water Surface
A React Three Fiber component for water surface with realistic reflections, with additional interactive FX.
# Installation
1. Make sure you have all dependencies installed first:
```bash
npm i three @react-three/fiber @react-three/drei @funtech-inc/use-shader-fx @types/three
```
2. Then copy/download the `/WaterSurface` directory to your project. Could be done by clone the repo.
```
WaterSurface
|_InteractiveFX
|_Water
|_...
```
3. Copy/Download assets files in `/public` to your `/public`.
```
/public
|_water
|_fx
```
# Usage
Import components from the directory just copied above. There are 2 type of components: WaterSurface & InteractiveFX. All of them are listed below:
## WaterSurface
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.
```jsx
```
### WaterSurfaceSimple
Simple water surface using 1 normal map distortion, imported from `public/water/simple/waternormals.jpeg`.
This is the three.js [Water](https://github.com/mrdoob/three.js/blob/66f7aa81379d0d3b31b7e58c9ecc42e08a16d724/examples/jsm/objects/Water.js) implementation.
```tsx
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;
};
```
### WaterSurfaceComplex
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](https://github.com/mrdoob/three.js/blob/66f7aa81379d0d3b31b7e58c9ecc42e08a16d724/examples/jsm/objects/Water2.js) implementation.
```tsx
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!)
## InteractiveFX
IntertiveFX type component will be the additional effects apply on the WaterSurface type. This can be added as children component of the WaterSurface component.
```jsx
```
### RippleFX
Cheap ripple effect using image texture as distortion on water surface.
An implementation of @funtech-inc/use-shader-fx [useRipple](https://use-shader-fx-stories.vercel.app/?path=/docs/interactions-useripple--docs) hook.
```tsx
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.
### FluidFX
Fluid simulation effect with customizable colors that distort water surface reflection.
An implementation of @funtech-inc/use-shader-fx [useFluid](https://use-shader-fx-stories.vercel.app/?path=/docs/interactions-usefluid--docs) hook.
```tsx
type Props = {
densityDissipation?: number;
velocityDissipation?: number;
velocityAcceleration?: number;
pressureDissipation?: number;
splatRadius?: number;
curlStrength?: number;
pressureIterations?: number;
fluidColor?: (velocity: Vector2) => Vector3;
};
```