---

title: Water category: Addons layout: docs

Water

A basic flat, reflective water effect.

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

References:

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

Import

Water is an addon, and must be imported explicitly, see Installation#Addons.

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

Constructor

new Water( geometry : BufferGeometry, options : Water~Options )

Constructs a new water instance.

geometry | The water's geometry.
---|---
options | The configuration options.

Properties

.isWater : boolean (readonly)

This flag can be used for type testing.

Default is true.

Type Definitions

.Options

Constructor options of Water.

textureWidth
number | The texture width. A higher value results in more clear reflections but is also more expensive. Default is 512.
---|---
textureHeight
number | The texture height. A higher value results in more clear reflections but is also more expensive. Default is 512.
clipBias
number | The clip bias. Default is 0.
alpha
number | The alpha value. Default is 1.
time
number | The time value. Default is 0.
waterNormals
Texture | The water's normal map. Default is null.
sunDirection
Vector3 | The sun direction. Default is (0.70707,0.70707,0.0).
sunColor
number | Color | string | The sun color. Default is 0xffffff.
waterColor
number | Color | string | The water color. Default is 0x7F7F7F.
eye
Vector3 | The eye vector.
distortionScale
number | The distortion scale. Default is 20.
side
FrontSide | BackSide | DoubleSide | The water material's side property. Default is FrontSide.
fog
boolean | Whether the water should be affected by fog or not. Default is false.

Source

examples/jsm/objects/Water.js