3D Objects Not Rendering in Nodes When Using FBX Loader

[FrancicoVerdu]

Describe the bug
When loading 3D objects via FBX loaders from three.js, I can visualize the element when adding it directly to the scene using graphRef.current.scene().add(element);. However, when trying to load the same 3D object into a node, the object does not appear as expected.

To Reproduce
Steps to reproduce the behavior:

1. Load a 3D object using an FBX loader from three.js.
2. Add the 3D object to the graph scene directly using graphRef.current.scene().add(element); (object is visible).
3. Add the 3D object to the graph scene directly using graphRef.current.scene().add(element); (object is visible).
4. Observe that the object is not visible when added to the node.

Expected behavior
The 3D object should be visible when loaded into a node, just as it is when added directly to the scene.

Screenshots
The first image shows a cube with a texture that has been added directly to the scene, while the nodes are displayed with their default settings.

The second image shows that nothing is visible when the 3D object is attempted to be loaded into the nodes.

The third image shows the error returned in the browser console, along with a console.log of the element that I attempted to add.

Desktop (please complete the following information):

• OS: [Ubuntu 22.04]
• Browser [e.g. chrome, firefox]

[vasturiano]

@FrancicoVerdu thanks for reaching out.

I'm not sure how you are adding the model to a node as that code is not mentioned. The best would be if you could create a simple example on https://codesandbox.io/ so that we can have a better look.

[FrancicoVerdu]

@FrancicoVerdu thanks for reaching out.

I'm not sure how you are adding the model to a node as that code is not mentioned. The best would be if you could create a simple example on https://codesandbox.io/ so that we can have a better look.

Thank you for your response!
I created a simple example on CodeSandbox and I'm sharing the project link with you React-ferce-graph-bug

In the code, you'll find a variable called inNodes, which is a boolean. If it's true, the 3D model is added to the nodes, and if it's false, the model is added to the scene.

In the example, when the 3D model is loaded into the nodes, it's only being rendered once instead of being added to each corresponding node. I tested the same example locally, and the same thing happens. I'm not sure why, in my other code, it's not being rendered at all.

[vasturiano]

@FrancicoVerdu I see. The real issue is that the fbx model objects are not being cloned correctly when included multiple times.

Here's a longer explanation of it:
https://discourse.threejs.org/t/best-way-to-duplicate-the-same-fbx-model/14772

And here's a fixed version of the sandbox that uses SkeletonUtils clone:
https://codesandbox.io/p/sandbox/react-force-graph-bug-h6v8h4

[FrancicoVerdu]

@FrancicoVerdu I see. The real issue is that the fbx model objects are not being cloned correctly when included multiple times.

Here's a longer explanation of it: https://discourse.threejs.org/t/best-way-to-duplicate-the-same-fbx-model/14772

And here's a fixed version of the sandbox that uses SkeletonUtils clone: https://codesandbox.io/p/sandbox/react-force-graph-bug-h6v8h4

Thank you so much for the help! I’ve noticed an issue with the example you provided: when trying to drag one of the nodes, the mouse position doesn’t match the node's position.

[vasturiano]

@FrancicoVerdu that is somehow related to the 0.1 scale factor applied to the prime model, I'm not sure why. Is there another method for shrinking the model that doesn't involve that transformation in the loader?

[FrancicoVerdu]

@FrancicoVerdu that is somehow related to the 0.1 scale factor applied to the prime model, I'm not sure why. Is there another method for shrinking the model that doesn't involve that transformation in the loader?

After running several tests, I've concluded that the best way to use 3D objects in the nodes is by utilizing the GLB format and setting nodeThreeObjectExtend={true}. This significantly improves the application's performance. The 3D object should remain within the default sphere because if you try to drag a 3D element, the following errors occur: 3d-force-graph.mjs:410 Uncaught TypeError: Cannot read properties of null (reading 'position'), and 3d-force-graph.mjs:434 Uncaught TypeError: Cannot read properties of null (reading '__data'). Adjusting the size of the sphere to match the model also solves the cursor position issue.