How to load the same 3D model

[xoptimal]

• three version: 0.134.0
• @react-three/fiber version: 7.0.17
• @react-three/drei version: 7.22.6
• node version: v14.17.3
• npm (or yarn) version: 6.14.13

Problem description:

How to load out 3 cars

Relevant code:

function Truck(props: any) {

  const { containerCallback,...rest } = props;

  const { scene, nodes, materials } = useGLTF('./truck.glb');

  const truckRef = useRef();

  useLayoutEffect(() => {
    scene.traverse((obj) => {
      return obj.type === 'Mesh' && (obj.receiveShadow = obj.castShadow = true);
    });

  }, [scene, nodes, materials]);

  return (
    <primitive
      {...rest}
      ref={truckRef}
      rotation={[0, 3.14, 0]}
      object={scene} />
  );
}

useGLTF.preload('/truck.glb');


function TODO() {
    return (
        <Suspense fallback={null}>
            <Truck key="truck-1" />
            <Truck key="truck-2" />
            <Truck key="truck-3" />
        </Suspense>
    )
}

Suggested solution:

help @drcmda
How to load the same 3D model, is there an example ???

[drcmda]

you can't do that in threejs, primitive mounts an existing object into the scene and a mesh can only be in one place. the solution to this is gltfjsx. see https://codesandbox.io/s/re-using-gltfs-dix1y this will also take care of that evil traverse mutation thing, with gltfjsx you can directly change props.

[xoptimal]

i see, thanks drcmda ~