Well, for starters, when you speak in 3D in javascript, I advise you to have one in the library Threejs. There is a huge range of complete examples with the most varied purposes that can help you in this difficult mission.
She works with OpenGl
and WebGl
.
You can see the compatibility of these in the browser here: http://caniuse.com/#feat=webgl
Because what you want is so complex
Almost all examples of 3ds terrestrial globes, such as this, are only one objects sphere
with a surface that, instead of having a texture, has an image manipulated to fit the surface of the sphere, it is a UV Mapping, I mean, it’s something static.
As you said that you wanted countries to be clickable, I imagine you want that by hovering or clicking on them, they stand out in some way, and that’s where the problem lies. For this, one should create an object for each country that wants to stand out, which would be quite difficult and would be ugly, be sure.
Because of this, what you will find in javascript, are these Earths that one can just rotate and see from various angles. However, it is important to know that this limitation refers to a detailed specification such as yours, but that the Threejs is, as said before, extremely complete.
There are some examples (with this) of something similar to what you want in Flash, but besides being outdated (flash), are almost impossible to manipulate.
Creating the Static Sphere from scratch
On this website there is a whole step by step of how to create a terrestrial globe in WebGl
. Apply the Uv Mapping, create the self relief through Blend Modes (blending modes), finally... leave cute. Serves you to understand more about the 3D modeling, the logic of textures, etc.
I hope, although I have not brought a solution, which has helped.
Good luck! And any doubt...
You already use the Threejs?
– Samir Braga
I’ve seen it, but I never used it. I’ll start now, thanks for the tip.
– Matheus Araujo