Hello vasturiano! can you help me add labels to nodes?

[ViridianPlexus]

I want to work with ThreeForceGraph since it is a bit more efficient for large numbers of nodes than 3d-force-graph but I really am struggling to create labels that exist above each node. I have an idea for a project that is simple conceptually but perhaps a bit difficult in realization. I'd like to visualize all the words in a dictionary as nodes, later I plan on connecting these nodes together in unique ways, ie synonyms, antonyms etc. but for now it is simple enough to just connect the words in alphabetical order to start with. I have a demo that I have created using 3d-force-graph but only with words beginning from A to C in English. When I try to load more words the frames drop, so I have been trying to use other more efficient libraries, but adding labels to nodes is not as straight forward.

[vasturiano]

@ViridianPlexus thanks for reaching out.

Have you tried using a code similar to this example on 3d-force-graph (the code should be the same with this module):
https://github.com/vasturiano/3d-force-graph/blob/957c1831157416e88ea9faf8e6a4edfe7b545858/example/text-nodes/index.html#L17-L25

[ViridianPlexus]

thank you for the response, were you able to see the invitation to the repo I uploaded? I am struggling to maintain high framerate and I am not sure how to improve performance.

[vasturiano]

@ViridianPlexus sorry I don't have enough bandwidth to look for issues in custom apps and/or repos. I'd suggest to make a simple example on https://codesandbox.io/ that reproduces and is focused just on the issue that you're experiencing, so that it's practical for everyone to troubleshoot. Thanks.

[ViridianPlexus]

Understood, apologies. I appreciate your effort and patience. I have copied the code over to a codesandbox example:

https://codesandbox.io/p/sandbox/crimson-wood-3dgfk6

the issue is poor frame rate, I am looking to produce a node to represent every word in the English language. In the example are only the words starting from A to C, as it stands i am unable to add any more words than this as the performance begins to degrade. any advice on how i may improve performance would be appreciated. Thank you.

[vasturiano]

@ViridianPlexus thanks for creating the example.

Well I actually get a fairly decent frame-rate from your example. In any case, it's mostly really dependent on the data size. In your case there's ~1800 nodes/links which should be fairly doable. The more nodes/links you have, the more computation is needed so naturally you'll eventually starting seeing an effect on the rendering performance.

One thing you can do however (and it's advisable to do so for rather large datasets), is to not animate the cooldown of the graph and jump immediately to its final state (or near final). In that case you won't notice any frame-rate jitter because it's essentially a single animation frame. You can achieve that easily like so:

myGraph
  .warmupTicks(70) // adjust to taste
  .cooldownTicks(0)

[ViridianPlexus]

Thank you so much, I implemented your advice and it certainly helped but I think things are still running a little slow, is there anything else I can do to improve performance? Thank you for your wisdom!

https://codesandbox.io/p/sandbox/w9cryj

[vasturiano]

@ViridianPlexus you could switch off the rendering of the default sphere on the node, to reduce the number of geometries in the scene. Perhaps that improves things further.

.nodeThreeObjectExtend(false)