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 http://www.webglearth.com, 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.