react-three-fiber to @react-three/fiber. Changing object in primitive not working properly-

i just updated my dependencies in an older project form react-three-fiber and drei to @react-three/fiber and drei. Everything works as expected and the overall performance is way better. Unfortunately the change of my object in primitive is not working properly.

Here is my ModelComponent:

function Model(props) { const model = useLoader(GLTFLoader, props.src); return ( <mesh position={props.position} rotation={props.rotation}> <primitive object={model.scene} /> </mesh> ); } 

I switch props.src between two sources, but then both models are loaded at the same time, and when I switch back the second one won't show at all anymore.

Before updateing my dependencies everything worked fine. I think it has to be some caching issue, but I can't figure out what exactly is the problem.

I hope you can help me.

thanks in regard.

2 Answers

You can give React a hint that the component needs to be completely re-created by giving it a key. In this case, the URL of your model would make a good key, because you want a new primitive when the URL changes:

<primitive key={props.src} object={model.scene} /> 

Could be caused by the (automatic) disposals of objects by React Three Fiber.

As also described here:

See:

Freeing resources is a manual chore in three.js, but React is aware of object-lifecycles, hence React Three Fiber will attempt to free resources for you by calling object.dispose(), if present, on all unmounted objects.

If you manage assets by yourself, globally or in a cache, this may not be what you want. You can switch it off by placing dispose={null} onto meshes, materials, etc, or even on parent containers like groups, it is now valid for the entire tree.

If you switch sources, React Three Fiber (could) dispose your old object. Try adding the dispose={null} on the <primitive> or nest it under a <group> with the dispose={null} property.