The refraction of water2 is not correct. Who can help me?

Questions
,
1

I am a rookie who uses threejs. There will be a lot of places to use water at work, but there will be refraction errors when using water2, which makes me very distressed, like below.

截屏2023-05-08 16.31.59
截屏2023-05-08 16.31.591304×765 156 KB

On the left is the glb file exported with blender, there will be a refraction error, and on the right is created with THREE.PlaneGeometry. This situation will become more and more serious when I rotate the camera perspective.

glbLoader.load(`${OSS_PATH}/flowMap_test.glb`, (gltf: { scene: any }) => {
      const mesh = gltf.scene.children[0];

      const waterParams = {
        color: 0x66f99f,
        // color: 0x0000ff,
        scale: 2,
        flowX: 1,
        flowY: 1,
        alpha: 1.0,
        clipBias: 1,
        refractionRatio: 2,
        reflectivity: 0.8,
      };

      const water = new Water(mesh.geometry, {
        textureWidth: 512,
        textureHeight: 512,
        color: waterParams.color,
        fog: scene.fog !== undefined,
        clipBias: waterParams.clipBias,
        scale: waterParams.scale,
        depthWrite: true,
        depthTest: true,
      });
      water.material.refractionRatio = waterParams.refractionRatio;
      water.material.reflectivity = waterParams.reflectivity;

      const water_p = new THREE.Vector3(60, 1, 0).add(mesh.position);
      water.position.copy(water_p);
      water.rotation.copy(mesh.rotation);
      water.scale.copy(new THREE.Vector3(50, 0, 50).add(mesh.scale));
      scene.add(track(water));
})
2

Do you mind sharing the glTF asset in this topic?

3

There is nothing special, just a plane exported with blender.

4

plane_text.glb (1.1 KB)
Just like this

5

The texture coordinates of the Blender mesh are slightly different as well as the default forward direction which might have an impact on water effect (which was only tested with built-in geometries so far).