Tengo un modelo GLTF que he estado intentando animar dentro de ThreeJS (el gif a continuación representa el objetivo final). Logré crear la animación dentro de Cinema4D, pero debido a que depende de un desplazador, no pude exportarla como GLTF en un formato reconocible de three.js (es decir, animación). Actualmente, estoy estirado entre usar algo como un ruido perlin o simplemente intentar animar manualmente las posiciones de los vértices. ¿Alguien podría decirme cuál/cómo sería la mejor manera de lograr este efecto? Actualmente, el enfoque que estoy intentando es exportar vértices de un GLTF cargado (en @react-fiber/tres) a un nuevo BufferGeometry, luego representarlo como una malla. El siguiente paso es intentar animar lo mismo ajustando las coordenadas de los vértices, pero todavía no estoy seguro de si ese es el enfoque correcto o si funcionará.

 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> ); };

Modelo GLTF, si fuera relevante: https://wetransfer.com/downloads/47957db9d49dd163c82af9ec836c74ce20220606100221/93ef2e

GIF del gol final : https://i.imgur.com/YXjiV0i.mp4