Clickable 3D Globe

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

I've been searching and so far found this:

Https://www.chromeexperiments.com/globe

Seems to be quite complete, but it does not give the possibility of clicking and I did not find much content to manipulate it.

Does anyone know of any place that teaches you to tinker with this globe or create one from scratch? I know it is something very complicated so any help is valid.

Author: Matheus Araujo, 2015-12-28

1 answers

Well, to start the conversation, when talking about 3D in javascript, I advise you immediately to give 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 e 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 just a sphere object 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, that is, it is something static.

Since you said You Wanted countries to be clickable, I imagine you want them to stand out in some way when you hover your mouse or click on them, and therein lies the problem. For this, one should create an object for each country that wants to stand out, which would be quite difficult and look ugly, rest assured.

Because of this, what you will find in javascript, are these lands that one can just rotate and see from various angles. However, it is important to be aware that this limitation refers to a detailed specification like yours, but that ThreeJs is, as mentioned before, extremely complete.

There are some examples ( with this ) of something similar with which you want in Flash, but besides being outdated (flash), are of almost impossible manipulation.

Creating the static sphere from zero

On this site there is a whole step by step of how to create a terrestrial globe in WebGl. Apply the Uv Mapping , create the auto relief through Blend Modes, finally... make it cute. It even serves you to understand more about the 3D modeling, the logic of textures, etc.

I hope, although I did not bring a solution, that it helped.

Good luck! and any questions...

 4
Author: Samir Braga, 2015-12-28 01:56:48