Hello Webflow Community,
I’m looking at integrating a custom Three.js water ripple effect into a Webflow project and could use some assistance. The code sets up a Three.js scene to render a water ripple effect using shaders. Here are the main components of the code:
Loading Three.js Library:
The Three.js library is included to handle 3D rendering.
Loading Textures: The code loads three textures: a noise texture, an environment texture, and a pool texture. These textures are used in the shaders to create the water ripple effect.
Setting Up the Scene: A Three.js scene is created with a camera and a plane geometry. The plane geometry is used to render the water ripple effect.
Shaders: Vertex and fragment shaders are defined to create the water ripple effect. The fragment shader contains the logic for rendering the ripples.
Interactivity: The code listens for pointer movements and clicks to update the mouse position, which affects the ripple effect.
Animation Loop: An animation loop is set up to continuously render the scene and update the ripple effect.
Below is the read-only link to the design page:
https://preview.webflow.com/preview/elipsecs-webgl-template?utm_medium=preview_link&utm_source=dashboard&utm_content=elipsecs-webgl-template&preview=bfe58ffa6df28ab84c4dab25d46d6a00&workflow=preview
My CodePen was the lab I used to create the effect I modified from other similar pens for easier testing and debugging: CodePen
Also you can view the code on my GitHub repository: GitHub Repository
Additionally, you can see the mess I made on the published Webflow page where my unsatisfactory render is struggling to happen… LOL! : Webflow Page
I’ve attempted several methods for implementing using a combination of embed code, custom code and designer style settings with some versions sourcing external and or internal .js file on a template that was created specifically using WebGL. However the effect I achieve on CodePen does not render in webflow.
I’m looking for any advice or suggestions on how to optimize this effect or integrate it more seamlessly into Webflow. Any insights or tips would be greatly appreciated!
Thank you in advance for your help.
Best regards,
Executive-Zero
