Issue with Loading 2x instances of a .glb model using gltfjsx generated code

[tsaockham]

Hello,

A tricky issue I'm trying to figure out. I'm trying to load two instances of the same .glb model. Only the second one is visible and animated. I believe the other one is there, although it's not visible and somehow it has identified the second model as sharing the same meshes (I know this through testing with select boxes, e.g. if I select the "ghost" first instance, the second one changes).

Here's an example: https://codesandbox.io/s/react-three-fiber-loading-gtlf-issue-ew59s?file=/src/Soldier.js:48-55

Any idea what I'm doing wrong? Appreciate the help.

[drcmda]

useloader is cached. and normally you would clone it. but i don't think you can clone skinnedmeshes due to threejs not supporting it. you can try, maybe they have it now but i dont think so.

so there's nothing you can do other than loading and parsing the model twice without the comfort of useloader, just like you do it in threejs

const [model, set] = useState()
useEffect(() => void (new GLTFLoader().load(url, set)), [url])
return model ? <... /> : null

[tsaockham]

okay. thanks again, I'll play around with that.

So the difference with this example is the skinnedmeshes which is preventing the duplication? https://codesandbox.io/s/react-three-fiber-gltf-loader-animations-c671i?file=/src/index.js:2417-2427

[drcmda]

im not entirely sure but i don't think you can make one pelican flap wings harder than the other. i read about cloning skinned meshes on threes discord once, someone mentioned that this is either a bug in three or not supported for some other reason.