Chapter 621: WaterMesh

Core Idea

A basic flat, reflective water effect.

Note that this class can only be used with WebGPURenderer. When using WebGLRenderer, use Water.

References:

• Flat mirror for three.js
• An implementation of water shader based on the flat mirror
• Water shader explanations in WebGL

Key Concepts

• alpha : UniformNode.<float>: The alpha value.
• distortionScale : UniformNode.<float>: The distortion scale.
• isWaterMesh : boolean (readonly): This flag can be used for type testing.
• resolutionScale : number: The effect's resolution scale.
• size : UniformNode.<float>: The size value.
• sunColor : UniformNode.<color>: The sun color.
• sunDirection : UniformNode.<vec3>: The sun direction.
• waterColor : UniformNode.<color>: The water color.
• waterNormals : TextureNode: The water's normal map.

Code Examples

import { WaterMesh } from 'three/addons/objects/WaterMesh.js';

• What it demonstrates: Typical usage of WaterMesh.

Reference Tables

Constructor

Signature
new WaterMesh( geometry : BufferGeometry, options : WaterMesh~Options )

Properties

Property	Description
.alpha : UniformNode.<float>	The alpha value.
.distortionScale : UniformNode.<float>	The distortion scale.
.isWaterMesh : boolean (readonly)	This flag can be used for type testing.
.resolutionScale : number	The effect's resolution scale.
.size : UniformNode.<float>	The size value.
.sunColor : UniformNode.<color>	The sun color.
.sunDirection : UniformNode.<vec3>	The sun direction.
.waterColor : UniformNode.<color>	The water color.
.waterNormals : TextureNode	The water's normal map.

Key Takeaways

1. WaterMesh extends: EventDispatcher → Object3D → Mesh
2. Most relevant properties: alpha, distortionScale, isWaterMesh, resolutionScale.

Connects To

• EventDispatcher: parent class
• Object3D: parent class
• Mesh: parent class
• Source: examples/jsm/objects/WaterMesh.js