Click on the map and choose 2 locations to reveal the terrain.
I use google map elevation service to get the altitude, the amazing thing of this service is that you can get even the altitude below the sea, try it yourself, it’s really interesting to see the terrain below.
For the 3D part, i didn’t use Three.js, i tried to start from scratch meaning setting the vertices and normals one by one, and write the shader code by myself. Definitely it takes longer but it helps me to understand how the webgl works. I’ve build a little 3D framework to help me build this project, compare to Three.js it’s really nothing, it’s more like a tool helping me to do the basic tasks, I will share it later on the GitHub. And again, i’m starting js only 6 months ago, so forgive me if the code is a little bit rubbish 😀
I’ve always interested in this kind of “low-poly” style, you should check this guy’s work, they are amazing :
I am trying to get as close as i can to this, still a long way to go,but the thing i learned is that you can’t rely only one light to create this kind of feeling, in this experiment i put 3 lights, first one is the white light on top, and then one yellow light and one blue light on the side, it’s a smaller trick i learned from motion designers. I really enjoy watching them doing compositing, they put tons of layers in order to get the final result. Obviously we can’t do that in real time, but the more elements(lights, textures, post-processing … etc ) you put on, the better result you will get.