Clickable 3D globe


I'm thinking of doing a project using a 3D globe with the possibility of clicking countries, but I do not know where to start.

I've been researching and so far I've found this:


It seems to be pretty full, but it does not give the ability to click and I did not find much content to manipulate it.

Does anyone know of a place that teaches you to move around the globe or create one from scratch? I know it's very complicated so any help is valid.

asked by anonymous 28.12.2015 / 01:23

1 answer


Well, for a start talking about 3D in javascript, I would advise you to give one in the library ThreeJs . There are a huge range of complete examples with a variety of 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: link

Because what you want is so complex

Nearly all examples of terrestrial 3Ds, such as this , are just a% cos objects with a surface that , instead of having a texture, has an image manipulated to fit the surface of the sphere, this is a UV Mapping in>>, that is, it is something static.

Since you said that you wanted the countries to be clickable, I imagine that if you hover over the mouse or click on them, they stand out in some way, and that's where the problem is. To do this, you should create an object for each country that you want to highlight, which would be very difficult and would be ugly, be sure.

Because of this, what you will find in javascript, are these Earths that one can only rotate and see from various angles. However, it is important to note that this limitation refers to a detailed specification such as yours, but that the ThreeJs is, as already said, extremely thorough.

There are some examples ( with this ) of something similar to what you want in Flash, but in addition to being outdated (flash), are almost impossible to manipulate.

Creating the Static Sphere from scratch

On this site there is a whole step to the step of how to create a terrestrial globe in sphere . Apply Uv Mapping , create the auto-relief through Blend Modes (merge modes), anyway ... leave it cute. It even helps you to understand more about 3D modeling, texture logic, etc.

I hope, although I have not brought a solution, that it has helped.

Good luck! And any questions ...

28.12.2015 / 02:28