How To Render Multiple 3D of Same 3D Model;

Question

I have a 3D model from Mixamo and used npx gltfjsx to make it into a component. Now I would like to render this model multiple times, but when I try to do so, I only get one model on Canvas.

Is there a way to do this? Here is my file:

  const { actions } = useAnimations(animations, heroRef);

  return (
    <>
      <group ref={heroRef} dispose={null}>
        <group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
          <primitive object={nodes.mixamorig1Hips} />
          <skinnedMesh
            geometry={nodes.Ch36.geometry}
            material={materials.Ch36_Body}
            skeleton={nodes.Ch36.skeleton}
          />
        </group>

        {/* <gridHelper args={[25, 25]}/> */}
      </group>
    </>
  );
}

useGLTF.preload("/Mannequin.glb"); ```

Any help/advice is appreciated.

Answer 1

The model needs to be cloned, like this:

const scene = React.useMemo(() => {
  return model.scene.clone();
}, [model]);

The above clones the scene, but you can do the same to nodes, materials, etc. inside the object returned from useGLTF

Here's an example:

https://codesandbox.io/s/heuristic-clarke-g58yp?file=/src/App.js