Use water JS appears black at some angles

Questions
1

I’ll use water again JS cloned the geometry in the model and created it as water. When the camera turns to some angle, it appears black. What’s the reason? Is it the wrong way I use it? The following is the code when I create an object

const geo = child.geometry.clone()
new Water(
              geo, {
                textureWidth: 512,
                textureHeight: 512,
                waterNormals: this.textureloader.load('waternormals.jpg', function (texture) {

                  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

                }),
                sunDirection: new THREE.Vector3(),
                sunColor: 0xffffff,
                waterColor: 0x001e0f,
                distortionScale: 3.7,
                fog: true
              }
            )

image
image1920×979 83.8 KB

2

Any chances to reproduce the issue with a small test case. I remember seeing a similar issue in the past but I don’t remember the workaround/solution anymore.

3

I found the reason for this problem. The plane on my model is perpendicular to the y-axis, while the plane created in the example is perpendicular to the z-axis. I rotate the geometric plane of the model 90 degrees around the x-axis to create water, and then rotate the water 90 degrees in the opposite direction, so that the created water will not have such a problem. I think this problem is caused by the wrong UV or the wrong vertex coordinates. :thinking: