<div class="animation" id="animation"></div>

  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body > div {
  box-sizing: border-box;
}

.animation {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 999999;
}

.animation canvas {
  width: 100%;
  height: 100%;
}

const section = document.getElementById("animation");
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true,
});
renderer.setSize(section.clientWidth, section.clientHeight);
section.appendChild(renderer.domElement);

const loader = new THREE.TextureLoader();
const geometry = new THREE.PlaneGeometry(5, 3, 20, 20);
const material1 = loader.load('https://i.ibb.co/kJ8ScGd/dutch.jpg')
const material2 = loader.load('https://i.ibb.co/9tBrXWR/english.png')
const material = new THREE.MeshBasicMaterial({
  map: material1,
  transparent: true,
  opacity: 0.8,
});

const plane = new THREE.Mesh(geometry, material);

plane.rotation.set(-.2, -.1, 3);

scene.add(plane);
camera.position.z = 5;

const clock = new THREE.Clock();

const animate = function () {
  const time = clock.getElapsedTime();

  plane.geometry.vertices.map(vertices => {
    vertices.z = 0.42 * Math.sin(vertices.x * 2 + time);
  });

  plane.geometry.verticesNeedUpdate = true;

  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

animate();

setTimeout(() => {
  plane.geometry.vertices.map(vertices => {
    vertices.z = 2.42 * Math.sin(vertices.x * 6 + clock.getElapsedTime());
  });

  plane.geometry.verticesNeedUpdate = true;
  console.log(plane.geometry);
}, 2000)