react-three-ocean
Version:
React wrapper for threejs ocean shader example
65 lines (55 loc) • 2.15 kB
Markdown
React/R3F wrapper for the [threejs ocean shader](https://threejs.org/examples/?q=water#webgl_shaders_ocean)
```bash
yarn add react-three-ocean
```
```bash
npm i react-three-ocean
```
`react-three-ocean` exports a React component specifically for use in react-three-fiber scenes. It has peer dependencies for [react](https://github.com/facebook/react), [three](https://github.com/mrdoob/three.js), and [@react-three/fiber](https://github.com/pmndrs/react-three-fiber).
Import the `Ocean` component for use in your r3f scene. By default, it renders a ground plane with the ocean shader applied.
You may forward a ref object to the `Ocean` component, which allows for further customization (e.g. sunDirection, animated waterColor, etc.). See below example for valid props.
```js
import { useRef, useState } from "react";
import { FrontSide } from "three";
import { Canvas } from "@react-three/fiber";
import { Box } from "@react-three/drei";
import { Ocean } from "react-three-ocean";
export function Scene() {
const [ camera, setCamera ] = useState();
const ocean = useRef();
return (
<Canvas
dpr={window.devicePixelRatio}
flat={true}>
<ambientLight intensity={0.8} color="#ddd"/>
<directionalLight position={[ 3, 5, -2 ]} intensity={1.2}/>
<Box args={[ 3, 3, 3 ]}>
<meshStandardMaterial color="red"/>
</Box>
<Ocean
ref={ocean}
dimensions={[ 10000, 10000 ]}
normals="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/waternormals.jpg"
distortionScale={20}
size={10}
options={{ // defaults
clipBias: 0,
alpha: 1,
waterNormals: null, // automatically set to provided texture from "normals" prop
sunDirection: new Vector3(0.70707, 0.70707, 0),
sunColor: 0xffffff,
waterColor: 0x001e0f,
eye: new Vector3(0, 0, 0),
distortionScale: 3.7, // automatically set from "distortionScale" prop
side: FrontSide,
fog: false
}}
/>
</Canvas>
);
}
```