I’m currently working on a space RTS Game, the whole game will be around a galactic map but I have some trouble with my System Map Marker.
The player can click on the system marker to entry in the system, for the moment the markers are made of Sprite, with generated texture the shape + the system Name, since few hours I doesn’t know that the center of a sprite can be set a another position, so the texture is for the moment a 512*512px with the “point” at center, and the text next to it, but here is my trouble : the whole sprite is intersected, even the transparent area.
I can resize the texture and change the center of the sprite, but I get another issue : the shape of the point, since my point are hexagonal, the edge of the texture around the point will be transparent and will get interseted
for example in the global screenshot (see bellow) :
The Jabaar’t system is in front of the Masiuma system, so if I want to hover Masiuma, I can get intersected with Jabaar’t System. So can I prevent the transparent area to get intersected ? or using something else than sprite will be better, like mesh with custom geometry ?
This would be the first thing I would try. Since the geometry of a hexagon is not that complicated, you might want to consider to generate it procedurally. Alternatively, you can create the model in a tool like Blender, export it as glTF and then load it via GLTFLoader (read the following guide for more information about this particular workflow three.js docs).
Raycasting in general does not account the opacity of the object’s surface. It just works on geometry level. Besides, read the following topic to understand how to orient the hexagon mesh always towards the camera: