useLoader + GLTFLoader potential bug and caching issue

[polymorpher]

useLoader + GLTFLoader combination works great in general. However, when I use them with a model that involves bone-based animations, the supposedly distinct meshes/groups from two Canvas instances on two separate screens somehow are sharing the same mesh state (position/rotation/scale, and maybe animation state too!). I have been unsuccessfully trying to resolve this issue, including attempting to (recursively) clone every loaded component produced by useLoader, but to no avail (see also three.js issues regarding cloning skeletons and bones). Fundamentally, I suspect the caching mechanism of useLoader is the culprit here, as people in this thread has encountered when they work with textures: https://spectrum.chat/react-three-fiber/general/useloader-memoization-prevents-parameter-variations~bba9f00f-95f4-4f5d-b59f-f108d0d5792a

If my suspicion is correct, it would be nice to have some options that disables the caching mechanism temporarily and forcing a reload.

I would love to attach a screenshot or sample code but it would take some time to construct a standalone example. I hope my description is detailed enough.

[drcmda]

useLoader caches, this is how suspense works in general. you would not be able to work synchroneously otherwise. when you don't a cached asset that it's as easy as doing

const { scene: sceneOriginal } = useLoader(GLTFLoader, url)
const scene = useMemo(() => sceneOriginal.clone(true), [sceneOriginal])

this is better than re-loading, re-parsing everything from scratch. faster and takes less resources.

with a skinnedmesh cloning does not work in threejs. you need to use their cloningUtils.