React-three-drei Overlap <Line> component vertice point with Html without affecting the prespective of the scene

Hi, im fairly new to threejs and react-three and im working on a project that consists of various points in a scene conected by a line, these points have the Html react three drei component.

My objective is to prevent the vertices of the lines from appearing inside the circles without ruining the prespective, like this:

I have tried several ideas to accomplish this but none worked, right now all i’ve got is this:
Screenshot 2023-09-06 151944

Here’s the sandbox

Previously I didnt include the occlude prop on the component wich caused all the circles to overlay the lines wich ruined the prespective

I would like to know if my goal is even possible to accomplish, thank you in advance :smile:

so the blue things are actually html overlays/annotations and you want them to occlude the lines, while lines that are technically in front should overlay the annotations.

in fiber that is technically possible, easily even and you were close, it’s not a ring shape but a circle shape. but since the lines have thickness they will still create a small dot in the middle because they peak through the occluding shape.

the only way i can think of to fix it is polygon offset. but to access that is tricky: Dots and Lines (forked) - CodeSandbox

i would still recommend not overusing html. annotations are expensive if you have too many, it would imo be better to make these connectors in threejs.

Thank you very much for the help, the reason im using html is because i want to put a text and a button inside of the circles.