Clickable 3D globe

Asked

Viewed 543 times

3

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

I’ve been doing some research and so far I’ve found this:

https://www.chromeexperiments.com/globe

It seems to be quite complete, but does not give the possibility to click and did not find much content to manipulate it.

Does anyone know of anywhere that teaches you how to work this globe or how to create one from scratch? I know it’s something very complicated so any help is valid.

  • You already use the Threejs?

  • I’ve seen it, but I never used it. I’ll start now, thanks for the tip.

1 answer

4

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...

  • 1

    If it has a list of geo-localized clickable countries, it would be possible to place markers in the sphere, and treat clicking on those markers.

  • Agree @bfavaretto. The sim markers are possible, similar to that example in flash, but in javascript. I intend to arrange an example with these markers. You have some?

  • Unfortunately I don’t have an example. I did it once, years ago, but it was with Flash.

  • It’s really hard to find one, and do in hand...

  • Thanks for the answers, I think I found the solution, look what a cool site: http://www.delimited.io/blog/2015/5/16/interactive-webgl-globes-with-threejs-and-d3

Browser other questions tagged

You are not signed in. Login or sign up in order to post.