Simple Water Tutorial Needed

Hi Everyone,

I’m using ThreeJS with Typescript, React, and the Drei library.

I would like to add some water into one of my scenes. Is this possible to do in a very well encapsulated way? Perhaps using a Material? So for example if I am going to make a cylinder of water I would just need to define a cylindrical mesh and then assign the WaterMaterial to it?

If it’s not quite this easy, could someone please direct me to the simplest way to get water into a scene?


What definition of water do you mean? Any reference/explanatory picture(s)?

I’m not too picky about the details of the effect. Given that I am hoping it will be easy to implement I figure that beggars probably can’t be choosers. But something that would be understandable by a user as water in an intuitive sense: so something that refracts light appropriately, absorbs blue light less than other spectra, is transparent, potentially is a bit wobbly and animated.

This sort of effect is probably more than I would hope for:

At this point I am mainly looking for something that is easy to integrate into my scene without too much ugliness. So basically something well encapsulated in some sort of nice way, either as material that I assign to a mesh or some sort of object3d subclass that I can pass the geometry into etc. or whatever people have come up with along those lines.

Right now I am just using a slightly blue tinted mostly transparent material. Even that is reasonably good for my use case but I would like for it to be a little nicer if possible. But again, I’m more interested in how well encapsulated the solution is over the specific details of the water effect itself.