Always display label on 3D force graph.

[SHASHANK9743]

So I am using the Force Graph 3D component. I wish to add labels to the node which are always visible.
Currently, the Label is displayed only when the Node is Hovered.
I looked into the examples and found this:
https://github.com/vasturiano/react-force-graph/blob/master/example/text-nodes/index-3d.html
However it has only text, and I need both node and label.
I know this issue has been asked previously in 126 and 57.
I am not very comprehensively trained in Three library.

Please suggest a solution for this. May be a code snippet of the Three Object which I need to pass to the nodeThreeObject props.

https://miro.medium.com/max/3280/1*Rf98vgvcLle1SZvLmmIwaQ.png

I want to have something like this but in 3-D Graph.

Please help me out.

[vasturiano]

@SHASHANK9743 if you wish to maintain the default node rendering together with the label, you just need to add

nodeThreeObjectExtend={true}

[SHASHANK9743]

Thank you so much. That helped. I would like to bring up a point though when using extend it was rendering the text, but text and node were overlapping so I changed the y position of the text to -8, and now it looks beautiful, this in for anyone comes here with the same problem. Thank You again

[TeyimPila]

Thank you so much. That helped. I would like to bring up a point though when using extend it was rendering the text, but text and node were overlapping so I changed the y position of the text to -8, and now it looks beautiful, this in for anyone comes here with the same problem. Thank You again

@SHASHANK9743 Please, How do you change the y position of the text?

[rupavathis]

Thank you so much. That helped. I would like to bring up a point though when using extend it was rendering the text, but text and node were overlapping so I changed the y position of the text to -8, and now it looks beautiful, this in for anyone comes here with the same problem. Thank You again

@SHASHANK9743 Please, How do you change the y position of the text?

nodeThreeObject={node => {
const sprite = new SpriteText(node.id);
sprite.color = node.color;
sprite.textHeight = 6;
sprite.position.y = -8
return sprite;
}}