Hello all,
I am having an issue with the Water Object in Three.js. Essentially, I noticed that when moving the water object, the water texture doesn’t move with it. Here is a clip of the issue:
(note, I am not adjusting the “time” attribute of the water material, but the issue remains when I do)
I essentially want the texture to move along with the plane to the left. I want to use the Water Object for the functionalities it provides (reflections and water motion with time attribute), otherwise I would simply apply the texture to a plane.
Here is my code: Edit fiddle - JSFiddle - Code Playground
Is there a way to achieve this? Thanks so much.
The texture coordinate is calculated in world space. You can modify the shader to apply the texture in object/local space to achieve the effect you desire.
Hi N8Three, how exactly do I do that? I apologize for my lack of shader code experience, the shader code can be found here: three.js/Water.js at 0c26bb4bb8220126447c8373154ac045588441de · mrdoob/three.js · GitHub.
Totally cool! The change you have to make is very small. Replace the line
worldPosition = mirrorCoord.xyzw;
with
worldPosition = vec4( position, 1.0 )
The former is the position of the vertex in world space and the latter is the position of the vertex in object space.
Wow, thank you so much, this is such a great help!