Correcting Sprite Group Alignment on FOV distortion

Hello everyone,

I’m working on a project where I need to display multiple labels next to an Object3D. To achieve this, I create several sprites, each containing a canvas texture with the relevant label. These sprites are then added to a group, which I position to align X and Y to the Normalized Device Coordinates space.

This setup works perfectly when the group is centered in the viewport (greenish case in the picture, only x-offsetted). However, when the group is offset from the center, I notice distortion caused by FOV. The sprites appear misaligned due to the perspective distortion.

Does anyone have insights or suggestions on how to resolve this issue? Any help would be greatly appreciated!

Thanks in advance!

Here is the link to a jsfiddle

Can you use an orthographic camera?

It is, unfortunately, not possible. The project needs to have a perspective.