How can create a 2d circle around a 3d object?

Questions
1

I’m creating an archery game
If you try the game you’ll see that arrows are just big green rectangles. I want to make them more realistic but then they will be harder to see. So, I figure I can create a circle on screen the highlights the location of the arrow. I tried using a CircleGeometry object but the circle gets smaller with the arrow as it moves away from the camera. Instead I want a circle that will stay the same size as the arrow moves away.

If I could somehow find the 2d coordinates of the arrow on screen maybe I could make an svg element that just hovers over those coordinates above the renderer DOM element… does anyone have any ideas? Thank you!

2

You can use a THREE SPRITE

load circle png into it and set the .sizeAttenuation property to false. SADLY, size attenuation property only works with perspective cameras, but if that’s what you’re using then you’re all set.