I am trying to render some animations from my .glb file. There are 4 animations in the file. I am using Next.js paired with Three.js (and react-three-fiber), so I would like to use JSX components for this, instead of using the traditional HTML. This is the code I have so far:
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>
)
}
I have tried googling everything and I can't find any documentation for this so any help would be appreciated. Thank you.