title: How to create water in react-three-fiber
body: <p>I want to create 3D scene with water like in this example <a href="https://threejs.org/examples/webgl_shaders_ocean.html" rel="nofollow noreferrer">three.js shader ocean</a> or <a href="https://threejs.org/examples/?q=wate#webgl_water" rel="nofollow noreferrer">water</a> but I have to create this in react-three-fiber library. I already searched the internet to find some good working example for this case but without result.</p>
  <p>Can I ask for help to figure it out how to implement above examples into react-three-fiber approach?</p>
  <p>here is what I have so far for metioned Water component:</p>
  <pre><code>import React from &quot;react&quot;;
  import waterNormal from &quot;./waternormals.jpg&quot;;
  //import { useLoader } from &quot;react-three-fiber&quot;;
  import * as THREE from &quot;three&quot;;
  
  import { Water } from &quot;three/examples/jsm/objects/Water.js&quot;;
  
  const WaterObject = () =&gt; {
    //const mapNormalWater = useLoader(TextureLoader, waterNormal);
  
    return (
      &lt;mesh&gt;
        &lt;planeBufferGeometry attach=&quot;geometry&quot; args={[100, 100]} /&gt;
        &lt;Water
          options={{
            textureWidth: 512,
            textureHeight: 512,
            waterNormals: new THREE.TextureLoader().load(
              waterNormal,
              function (texture) {
                texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
              }
            ),
            sunDirection: new THREE.Vector3(),
            sunColor: 0xffffff,
            waterColor: 0x001e0f,
            distortionScale: 3.7,
            // fog: scene.fog !== undefined
          }}
        &gt;&lt;/Water&gt;
      &lt;/mesh&gt;
    );
  };
  
  export default WaterObject ;
  
  </code></pre>