text wave

Animating text textures for my web apps using React Three Fiber. This project explores dynamic 3D text textures that can either auto-animate or respond to the cursor position, controlling the intensity of the animation in real-time.

• React Three Fiber for rendering 3D scenes within React
• Drei addons, specifically Plane, for easier creation of textured planes
• Three.js for texture management and geometry manipulation
• Raleway font used for my text samples

• Wave Animation Based on Cursor

  The 3D text texture deforms dynamically based on cursor distance from the top left of the canvas. The animation's intensity scales with the cursor's proximity to the edges, achieved via custom shaders and vertex displacement.

• Auto-Animation Mode

  Enables a continuous, smooth wave effect on the text texture without requiring user interaction. This mode can be toggled, using a parameter to control the animation speed.

• Texture Handling

  Efficiently loads and maps textures using THREE.TextureLoader, ensuring optimal aspect ratio scaling on different viewports.

• Real-Time Vertex Displacement

  The vertex positions are recalculated every frame to create a wave effect using a combination of sinusoidal functions. For instance:
const waveX1 = 0.5 * Math.sin(vertex.x + time * 2); const waveY1 = 0.25 * Math.sin(vertex.y * 2.5 + time * 2); vertex.z = targetIntensityRef.current * (waveX1 + waveY1);

• Responsive Scaling

  Automatically adjusts the plane size to maintain texture quality across different screen sizes.