THREE.Water in Vertical Orientation

I understand you're trying to use THREE.Water in a vertical orientation (like a wall) and experiencing issues with broken wave appearances.

Based on the information available, this issue likely occurs because the THREE.Water component was primarily designed for horizontal water surfaces. When you rotate it to a vertical position, the wave calculations and normal mapping may not behave as expected.

Unfortunately, the specific THREE.Water implementation isn't covered in the context I have available. However, I can suggest some general approaches to address this issue:

1. Modify the shader code: You might need to adjust the wave calculation in the water shader to account for the vertical orientation.

2. Use a helper: Consider using one of Three.js's helpers to visualize what's happening with your normals and wave calculations:

   • ArrowHelper - to visualize vectors and directions
   • GridHelper - to ensure proper orientation
   • AxesHelper - to confirm your coordinate system

3. Check geometry orientation: Ensure your water plane's geometry is properly oriented when rotated.

4. Adjust wave parameters: Try modifying the wave parameters to see if certain configurations work better in vertical orientation.

5. Custom implementation: You might need to create a custom water shader that's specifically designed for vertical surfaces.

Without seeing the specific error in your implementation, it's difficult to provide a more targeted solution. If you can share more details about how exactly the waves appear "broken," I might be able to offer more specific advice.