Image Ripple Effect

An animated image ripple effect component built with React-Three-Fiber, featuring stunning 3D ripple animations and WebGL-powered visual effects. Creates dynamic water-like ripples across images with smooth Three.js animations for immersive web experiences.

Thanks to Akash

Open

Installation

npm install three @types/three @react-three/fiber @react-three/drei

Usages

Change texture from here

const texture = useTexture('/brush.png');

change image and control the position of image


// change images
const texture1 = useTexture('/picture3.jpeg');

const material1 = new THREE.MeshBasicMaterial({ map: texture1 });
const image1 = new THREE.Mesh(geometry, material1);

// positining
image1.position.x = -0.0 * viewport.width;
image1.position.y = 40;
image1.position.z = 1;
image1.scale.x = viewport.width / 4;
image1.scale.y = viewport.width / 3.2;

you can add multiple images

function Images(viewport) {
  const scene = new THREE.Scene();
  const camera = new THREE.OrthographicCamera(
    viewport.width / -2,
    viewport.width / 2,
    viewport.height / 2,
    viewport.height / -2,
    -1000,
    1000
  );
  camera.position.z = 2;
  scene.add(camera);
  const geometry = new THREE.PlaneGeometry(1, 1);
  const group = new THREE.Group();
  // !mark[//images/picture1.jpeg/] red
  // !mark red
  const texture1 = useTexture('/images/picture1.jpeg');
  const material1 = new THREE.MeshBasicMaterial({ map: texture1 });
  const image1 = new THREE.Mesh(geometry, material1);
  image1.position.x = -0.25 * viewport.width;
  image1.position.y = 0;
  image1.position.z = 1;
  image1.scale.x = viewport.width / 5;
  image1.scale.y = viewport.width / 4;
  group.add(image1);
  // !mark[//images/picture2.jpeg/] green
  // !mark
  const texture2 = useTexture('/images/picture2.jpeg');
  const material2 = new THREE.MeshBasicMaterial({ map: texture2 });
  const image2 = new THREE.Mesh(geometry, material2);
  image2.position.x = 0;
  image2.position.y = 0;
  image2.position.z = 1;
  image2.scale.x = viewport.width / 5;
  image2.scale.y = viewport.width / 4;
  group.add(image2);
  // !mark[//images/picture3.jpeg/] gold
  // !mark gold
  const texture3 = useTexture('/images/picture3.jpeg');
  const material3 = new THREE.MeshBasicMaterial({ map: texture3 });
  const image3 = new THREE.Mesh(geometry, material3);
  image3.position.x = 0.25 * viewport.width;
  image3.position.y = 0;
  image3.position.z = 1;
  image3.scale.x = viewport.width / 5;
  image3.scale.y = viewport.width / 4;
  group.add(image3);

  scene.add(group);
  return { scene, camera };
}

Assets

Download
GlobeR3F Blob