Passing a react-three-fiber component to nodeThreeObject?

[khughitt]

Hello!

Is it possible to use a react-three-fiber (r3f) component, e.g. something like the Box component in their README, with nodeThreeObject?

I have a r3f component that I'm using elsewhere in an application, and would like to render the same entities in the network.

Attempting to pass the component directly fails, since it's not actually a three.js mesh ("Uncaught TypeError: can't define property "__graphObjType": Object is not extensible").

I also tried creating a ref in the component where <ForceGraph3D> is instantiated:

const ref = useRef<THREE.Mesh>(null!)

And then passing that in as a prop into the r3f component and then in turn setting that as the "ref" prop for the parent level <mesh> returned in the r3f component, but that also didn't work: ref.current never evaluated to anything besides null..

Passing refs in that way could also become awkward once one tries to render multiple nodes this way.

Any ideas?

[vasturiano]

@khughitt this module does not have any understanding of the three-fiber environment, so it won't understand if you pass a r3f object directly to it. It expects a ThreeJS object, typically a Mesh. So if there's a way to extract a Mesh from your r2f object you can just feed that into this lib.

On the other hand, if you're already working in a r2f scene, you could also consider doing it the other way and import a three-forcegraph object onto your scene. Then you'll everything under the same roof.

[khughitt]

Okay thanks! That makes sense.

The first suggestion (r3f component -> Mesh) probably makes the most sense in my case. I'll see if I can find a way to do this and share it back here if I have any luck.

Unrelated but if you are still find yourself working with react + three.js these days, I have been really enjoying r3f and found it a helpful way to encapsulate complexity associated with three.js entities. Definitely worth checking out if you have the chance.