I have a GLTF model I've been attempting to animate within ThreeJS (gif below representing the end goal). I've managed to create the animation within Cinema4D, but due to it depending on a displacer, I was unable to export it with as GLTF in a three.js recognizable format (animation that is). Currently, I'm stretched between using something like a perlin noise or just manually attempting to animate the positions of vertices. Would anyone be able to tell me what/how would be the best way to achieve this effect? Currently, the approach I'm attempting is to export vertices from a loaded GLTF (in @react-fiber/three) into a new BufferGeometry, then represent it as a mesh. Next up is attempting to animate the same by adjusting the coordinates of vertices, but I'm still unsure if that's a correct approach or will it even work.

const SkyElement = (props) => {
  const { nodes, materials } = useGLTF("./element.gltf");
  const group = useRef();
  let geom = nodes.Plane.geometry;

  let geometry = new THREE.BufferGeometry();
  geometry.setAttribute("position", geom.attributes.position);
  geometry.computeBoundingSphere();
  geometry.name = "SkyElement";
  geometry.setIndex(geom.index);

  let mat = new THREE.MeshStandardMaterial(materials[""]);
  mat.side = THREE.DoubleSide;

  const animation = () => {};

  return (
    <group ref={group} {...props} dispose={null}>
      <mesh
        castShadow
        receiveShadow
        geometry={geometry}
        position={[0, 0, 0]}
        material={mat}
        rotation={[0, 110, 0]}
        scale={0.05}
      />
    </group>
  );
};

GLTF model, shall it be relevant: https://wetransfer.com/downloads/47957db9d49dd163c82af9ec836c74ce20220606100221/93ef2e

GIF of the end goal: https://i.imgur.com/YXjiV0i.mp4