Need help with exporting water animation from blender to 3js

Hi, I am new to 3js as I have built a blender environment with a bridge, water and a boat. Everything is being exported well with the animation, except the water does not move. The water has a displacement modifier and is linked to an empty arrow object. The empty arrow object is animated, not the water itself. What could I do to properly export the water in a gltf/glb format, and having its animation play?

ImageToStl.com_radhika_bridge_env.zip (2.2 MB)

To export something such as this to glb you have some options…

  1. You can bake a point level animation to the water mesh so that each vertex of the geometry has an animation track (this can result in huge file sizes depending on the amount of vertices and length of animation. PLA is also tricky to loop and in general is quite a restrictive way to go)

  2. You can create morph targets of the water at some different stages of the water movement exporting this to gltf and morphing between stages in three. Again this can yeild big file sizes depending on the amount of vertices and morph iterations ( creating a smooth loop with this approach would be easier but precision will be slightly less if you need to match an exact animation)

  3. Export your assets non animated and create your water displacement programmatically in three, this would allow you complete freedom of any looping and be the least expensive in terms of file size, of course you’d have to program a few things like the tuning the displacement to the way you need it as well as approximating the surface motion at any given point to apply to floating objects but worthy things to learn and know how to do…

I’m sure there may be other ways but I’m sure these would be the most common ways to achieve what you’re after…

1 Like