What is method to use add Reflection on my waterQuad in Three.js with React Three Fiber?

[Mad_Sci]

Hello All,

I have done a basic water in Cpp with GLSL.
I was able to use FBO-texture.
first Bind FBO and render ‘AboveWaterScene’ and then use the respective Texture from FBO to bind with my WaterQuad to show its Reflection.

The current basecode has Water Implemented in Three.JS with SineWave and Gerstner.
But I am not able to add Reflection in it .

There was CubeCamera added which shows some reflection, but it is not showing the placeholder Cube which is above water. It is only showing Rectangle shape which is scaled than usual.

Is CubeCamera correct way to get my reflection for water ? or is there any other way?

In this screenshot it shows a Reflection of CUBE but it seems scaled and looks 2D from any angle.

In this screenshot I added SPHERE but its faintly Visible in 2D like the CUBE.

I

Thanks in Advanced.

[Mad_Sci]

Update:
It is showing reflection of another animating 3D object as well but still looking scaled.
I need help to understand and use it like FBO concept where I will be able to Render everything which is above water into the reflection.

[franky-adl]

Have you tried using MeshReflectorMaterial - Drei since you are using react three fiber?

[Mad_Sci]

Thanks. I will try and check it now.