Select distinct part of a model


First of all sorry if this topic already exists, I didn’t find it.
I have to say that PlayCanvas is amazing, for what I’ve tried so far.

I need to make some kind of “educational game” where you can see a 3D globe (Earth) where you can clic on a country (let’s say for example France) and it displays “France” in a HTML canvas, if you clic on England it will display “England”.

To do this I need to know where France is on the model (the globe), but I don’t know how I can achieve this (the fact to know that a certain part of the model is “something” and make that part “clickable”). Is there any example project or any kind of tutorial on that?

Let me know if I was not clear enough,
Thanks in advance for your help


You probably need something that works with mouseover. I would look at D3.js for data and interaction, then move to Leaflet in 2D, and maybe, which is compatible with Leaflet. You might be able to do it all in D3.js with the right projection.

There are probably a number of different ways to do this. However, I would probably do it as follows:

I would find/generate a texture map of the earth where each country is a different solid color. For example:

UK: #000001
Germany: #000002
…and so on.

Then I would render a sphere with that texture to an offscreen render target, using a camera that has the same properties and my main camera.

Then, when the mouse moves, I would get the mouse pointer x and y and read back the color of the pixel at that location in the offscreen buffer. That color matches a country. Just thinking about it, we don’t currently have a function to read the pixel of a render target but it’s easy to add one or just do it with a WebGL call.

Does this technique make sense?

Babilonn, it would be interesting to hear what you ended up doing! Thanks!