Alignment of Pointer(Sprite) and their labels in ThreeJS in a 3D Map

I am working on a 3D Map with 3JS where i am using a THREE.Sprite as a pointer and CSS2D Object as a label. When hovered on the sprite the label appears above the sprite and also a side pane opens displaying the information of that place. I want to pointer to appear in the center of the screen but with the sidepane opened it does not appear in the center so I implemented a function which calculates the Xoffset and positions the camera at a place the the pointer seem to be in the center of the remaining screen but now a new issue arises that the label is not properly aligned with its pointer. Attaching picture for reference:

Not Aligned

I am passing the labels into the pointer class. It then becomes a Object3D.

1 Like