Switching between shared materials

[Datanizze]

Hello!

I have a use case where it should be possible to change materials on the fly.
I'm using a shared (memoized) material factory so I only need to create a unique material once.

Sharing a material between different meshes has not been a problem but when I try to change a material used by more than one mesh I get an error.

---

I've reduced the problem to a codesandbox:
https://codesandbox.io/s/gallant-https-we93i?file=/src/App3d.tsx

Clicking any box should change the color of both boxes but instead I get an error.

Checking the relevant r3f code it's clear that because the material only can have one parent it is removed from there and then the next time it has no parent and the error occurs.

If I modify the sandbox to give each box a separate state of which material to use it's always the right (last) box that changes color (unless you try to set both to blue which will result in the same issue as the first codesandbox). I guess this is because of how parent/children works and that parent is set to the last mesh where the material is used and that's what r3f use in switchInstance?

If I turn off the memoization it works as it should (since no material is shared).

Is this use case limited by how parent/children works in three.js/r3f? Is there a workaround?

[gsimone]

Here's an alternative using useResource and putting the materials in the tree so that you can still pass props to modify them

https://codesandbox.io/s/billowing-monad-bgnnt?file=/src/App3d.tsx

[drcmda]

in threejs one child can not be in two parents. primitive is an escape hatch that allows you to dump a readymade object into a scene, but unfortunately it is inviting to try what you did. though i don't quite understand why you want to make it so complicated: https://codesandbox.io/s/funny-greider-x97rs

<Box
  position={[-100, 0, 0]}
  args={[100, 100, 100]}
  onClick={() => setUseRed((s) => !s)}
  material={useRed ? materialRed : materialBlue} />

rule of thumb: you can freely share geometries and materials (in the same canvas!) but you can't have one mesh or any object in two places.

[gsimone]

Any reason you'd want to useMemo instead of declaring the material in the react tree?

[Datanizze]

No reason for useMemo, mainly used it to reproduce the error. I saw useMemo being used in another issue about sharing materials, guess that where I got the inspiration from.

In the real code base it's more like @drcmda's example where the materials are created outside of react. So the issue here for me was using <Primitive />.
I've been using the declarative way almost exclusively (materials and geometries as <Mesh/> children) so I didn't even think to passing them as props and used primitives instead.

Thank you both for the help and pointers!