When creating an ordinary plane, the reflection of the water material is correct. When using an irregular geometry in the model, the reflection of the water appears black and stretched. When the camera is close to the water surface, such reflection will appear
This is my example, in which the buffer geometry is the one I used in the project
The geometry definitely has to be flat (which is not true in your live example).
Is there any way to solve this problem when the geometry is not flat？ 
Not with the Water class. You need a different implementation.
I suggest you search the web for this since there are many approaches for coding water with different pros and cons.
Is it reasonable to create water with a plane, and then assign the material of the plane mesh to the not flat mesh?
I’m afraid you will end up with a strange looking effect. The reflections of the Water are implemented with a flat mirror. That means the geometry should be flat, too.
If you only want to reflect the sky and not nearby objects, you might be able to add a skybox and then create a water “model” that reflects the surrounding skybox.
Alternatively, one method of animating water that I have read about (but never tried) is to use a flat plane and a moving normal map to animate the water. (You can’t use this to create big waves.) Because the underlying plane is flat, you should be able to get the reflections your want.
I put an empty mesh body using water material under the water surface, then shared its material with the water surface, and opened the transparent of water material to get the correct reflection, But such reflections stretch when the camera rotates to some angle. I don’t know why. When the number of vertices of the mesh is empty, how will it generate reflection?
Are there any reference articles about this way you said? thank you
Looking at them again, the references I had showed how to use this technique in Unity and Blender. So you may have to do some work to figure out how to make them work in three.js.
This recent video shows how to make a flowing river in three.js using Water2, which may be a useful alternative to Water.js.
It seems that one way to animate using a normal map would be to create a scrolling grid and move the grid. I have been working on creating multi-layer scrolling grids. But you should be able to use a single-layer scrolling grid. This page has several examples at the bottom, including a few single-layer examples and one multi-layer example using oceans textures and a bump map. Of course, these are designed to remain stationary while you move, but they could be easily modified to move while you remain stationary.
I hope this helps a bit.
