CSS2D Renderer - Markers to far from the model

Questions
1

Hello !
I come again because last time, guys were so helpful ! So again, I have questions !
I’m trying to achieve something with a planet and markers on countries.

I know the subject was discussed a lot before, here my researchs: (Because I don’t want you to think I just want help ahah)

Ok, so, here what I would like to have :

Accueil - Copie
Accueil - Copie1344×756 121 KB

Aaaaaand what I have for the moment :

what i have
what i have1864×826 158 KB

So I’m trying to have markers on my custom GLTF Model.
The idea is :

  • My 3d model have separate meshes for each countries
  • I check the array I defined before if a country exists
  • I put a 2d marker with CSS2D on this specific country
  • It will be clickable in the future but I want to focus of the problem
  • Also, when I click on a country, it gives me the name (in the console), that’s cool.

The problem is, like you can see, the marker follows the country, but it is to far away, I don’t know how and why it appears like this.

Is it because of my model ? But like I told you : why I can check the country but I can’t put something in it?
I have a wrap on my 3d model, maybe that’s the problem ?
Here is my 3d model :

send
send1095×741 148 KB

And if you want to donwload the gltf file, it’s here :
https://www.oskawa.fr/earth10.glb

And of course, my code (I tried to make it work on codePen but It doesn’t work ahah) :slight_smile:

Thank you for your future help
Good day to you !

2

would you consider react for this? what otherwise would be a weekend spent on boilerplate, math and raycasting costs you a few minutes. i downloaded a sketchfab model, threw it into https://gltf.pmnd.rs/, clicked “codesandbox” and added html markers and click handlers crazy-germain-6oei7 - CodeSandbox the marker is from font-awesome, a css font, but you can put any html in there.

3

Hello @drcmda,
that’s pretty neat ! Thank you !

I never used React before and the website is made with wordpress. I will take a look because yeah, your solution sounds really good.

4

Otherwise im sure you can take some useful info out of the Html component, the bit that handles occlusion: drei/Html.tsx at 3569f065bc12cc6bb2ca80164b35ebcc60dc579f · pmndrs/drei · GitHub this is something that imo css2drenderer does not do yet, last time i checked at least.