ThreeJS Globe z-index issue

Question

I'm trying to display a Globe with points on it that open a card when clicked. I kinda try different approaches and came up to this result : http://lefutoir.fr/timac/v1.html#

I'll need to put an HD texture of course but my main issue is that I have z-index issues. When I open some cards they are below other because of a z-index passed when they are created. I can't find any way to get control on that z-index to make it super high when I open a card.

If anyone there could have an idea that would be awesome. Tell me if you need the code I'll copy there but it's quite long.

Thanks a lot !

I want to make the open card on top of the other dots.

Answer 1

It looks like you're using a third-party library called three-globe, so it's hiding a lot of the mechanisms from you. I recommend you build your CSS3DObjects so you have more control over them, like in this example.

The problem you're encountering is that each dot has its own card, so when you open a card, it will almost always have subsequent dots on top of it, regardless of Z-indexing:

<dot>
    <card>
</dot>
<dot>
    <card>
</dot>
<dot>
    <card>
</dot>

What you should do is create all the dots first, and then the cards, so the cards will always be displayed on top.

<dot />
<dot />
<dot />
<card />
<card />
<card />