Estoy tratando de renderizar algunas animaciones desde mi archivo .glb. Hay 4 animaciones en el archivo. Estoy usando Next.js junto con Three.js (y react-three-fiber), por lo que me gustaría usar componentes JSX para esto, en lugar de usar el HTML tradicional. Este es el código que tengo hasta ahora:

 function Scene() { const gltf = useLoader(GLTFLoader, '/drone1_spin.glb') const mesh = useRef() // This is where i'm having issues as I do not know how to render all 4 animations const [mixer] = useState(() => new THREE.AnimationMixer()) useEffect( () => { void mixer.clipAction(gltf.animations[0], mesh.current).play() void mixer.clipAction(gltf.animations[1], mesh.current).play() void mixer.clipAction(gltf.animations[2], mesh.current).play() void mixer.clipAction(gltf.animations[3], mesh.current).play() }, [gltf.animations, mixer] ) // The return and stuff works all fine, but just displays a static model with no animations return ( <Suspense fallback={null}> <primitive ref={mesh} object={gltf.scene} scale={0.5} /> </Suspense> ) }

He intentado buscar en Google todo y no puedo encontrar ninguna documentación para esto, por lo que agradecería cualquier ayuda. Gracias.