The instance all option generates code that doesn't work with animations.

I tried uploading a GLTF model with animations and it gives me this code:

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef, useMemo, useContext, createContext } from "react";
import { useGLTF, Merged, useAnimations } from "@react-three/drei";

const context = createContext();
export function Instances({ children, ...props }) {
  const { nodes } = useGLTF("/pm0019_00.gltf");
  const instances = useMemo(
    () => ({
      PmBodySkin: nodes.pm0019_00_BodySkin_2,
      PmBodySkin1: nodes.pm0019_00_BodySkin_3,
      PmBodySkin2: nodes.pm0019_00_BodySkin_4,
      PmMustacheSkin: nodes.pm0019_00_MustacheSkin_1,
    }),
    [nodes]
  );
  return (
    <Merged meshes={instances} {...props}>
      {(instances) => (
        <context.Provider value={instances} children={children} />
      )}
    </Merged>
  );
}

export function Model(props) {
  const instances = useContext(context);
  const group = useRef();
  const { actions } = useAnimations(animations, group);
  return (
    <group ref={group} {...props} dispose={null}>
      <group name="pm0019_00_fi20_walk01">
        <group name="Armature" rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
          <group name="pm0019_00_BodySkin">
            <instances.PmBodySkin name="pm0019_00_BodySkin_2" />
            <instances.PmBodySkin1 name="pm0019_00_BodySkin_3" />
            <instances.PmBodySkin2 name="pm0019_00_BodySkin_4" />
          </group>
          <instances.PmMustacheSkin name="pm0019_00_MustacheSkin_1" />
          <primitive object={nodes.pm0019_00} />
        </group>
      </group>
    </group>
  );
}

useGLTF.preload("/pm0019_00.gltf");

As you can see, the animations and nodes properties are not defined in the Model component. Also, if you try this with TypeScript, most types are missing.

You can try it with this model: pm0019_00.gltf.zip

pmndrs / gltfjsx

The instance all option generates code that doesn't work with animations. #247