Raycaster and transparent area

Hi everyone,

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 is how the galactic map look like :
Capture%20d%E2%80%99%C3%A9cran%20de%202018-10-05%2011-02-10

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:

And the trick with the geometry of hexagon:
https://discourse.threejs.org/t/comparing-2-approaches-using-buffergeometry/3967/5?u=prisoner849

1 Like

I have Used a CircleGeometry with 6 segment to make my hexagon :), some kind of very simple way to do it.

I have managed to make the hexagon always face to the camera, with the same trick, but I have some trouble with Hexagon as child.

some of my stellar Object can have an Orbit (mostly for comet), and the Orbit is the parent of the hexagon mesh, and the quaternion doesn’t work well for this.

here is how my object are structured (2 options):
Object3D (Universe) > Object3D (Orbit) > Object3D (StellarObject) > Object3D (MapMarker)
Object3D (Universe) > Object3D (StellarObject) > Object3D (MapMarker)

there is a lot of object3d since there are wrap by some Actor Class (Game Engine Architecture)

StellarObject without orbit work great, beacause there is no rotation on the parent, but the Orbit can have some rotation.

so how apply the camera quaternion to the Hexagon when there is a parent Orbit ?