Loading 1 Model and N Animations from seperate files

[saturn118]

Hi. I have a situation where I have a model and it has hundreds of possible animations it can run. The current gltfjsx workflow seems require all animations and the model being in a single glb file. Is there currently a way of doing this seperately so I can load the model and animation as seperate files and apply different animations at runtime.

[drcmda]

if threejs can do that then sure. gltfjsx doesnt do much here, you can use the useAnimations hook yourself.

[drcmda]

animations are a side effect, you can use them inside a useeffect. useAnimations needs to know the root. and actions is an object not an array.

const group = useRef();
const { nodes, materials } = useGLTF("/model.gltf")
const { animations } = useGLTF("/animation.gltf")
const { actions, names } = useAnimations(animations, group)

useEffect(() => {
  actions.actionName.play()
}, [])

return (
  <group ref={group} {...props} dispose={null}>

[saturn118]

Thanks, I tried your suggestion and it seems to work. Though I'm running into one minor issue. I'd like to be able to dynamically change the animation file that's playing by passing in the animation path as a prop (animationFileToPlay variable in the example below). This would need to involve 'useGLTF' and 'useAnimations' being triggered again whenever useEffect is triggered something like what's shown below. Any idea what's the best way to achieve that?

export default function Model({
  animationFileToPlay
})
const group = useRef();
  const { scene, materials } = useGLTF("/model.gltf");
  const clone = useMemo(() => SkeletonUtils.clone(scene), [scene]);
  const { nodes } = useGraph(clone);
  const { animations } = useGLTF(animationFileToPlay);
  const { actions, names } = useAnimations(animations, group);

useEffect(() => {
//somehow trigger useGLTF and useAnimations to load the new animation HERE using animationFileToPlay

  actions.name.play()
}, [animationFileToPlay])

return (
  <group ref={group} {...props} dispose={null}>

[drcmda]

usegltf has no problem with that, but useanimations looks like it only works once: https://github.com/pmndrs/drei/blob/master/src/core/useAnimations.tsx you can copy it try to make it more versatile and the create a pr for drei. or you just use three.animationmixer as is without hooks and abstractions.

[balsamic-bz]

I'm having this same issue, useAnimations works only once when I'd like to update the animations in the component.

@saturn118 did you every find a workaround to this?

[saturn118]

@balsamic-bz
I didn't manage to find a way to blend one animation to another seemlessly. Instead I just reloaded the entire component by changing the key attribute. It's a hack and there's probably a better way to do it.

const [myKey, setMyKey] = useState(1);
const [animToPlay, setAnimToPlay] = useState("running.glb");

function reloadCharacterAnimation(newAnimationPath)
{
   setAnimToPlay(newAnimationPath)
   setMyKey(Math.random() * 99999)
}

<MyAnimatedModelComponent key={myKey} animationPath={ animToPlay} />