Building the Earth with WebGL and JavaScript

Originally published at: http://www.sitepoint.com/building-earth-with-webgl-javascript/

Of all the HTML5 and related APIs we’ve been given, WebGL is possibly the most interesting. With it we can create awesome 3D environments right in our browsers, and in this article I’m going to walk you through exactly how to do that.

In particular, we’re going to be building a model of planet Earth that we can rotate around like a crazy person and with which we can wow our fellow developers… well, at least a little.

Before We Begin

For this tutorial we will be using the fantastic three.js WebGL plugin. It’s a bit like jQuery for WebGL in that it abstracts a lot of the processing ugliness inherent in the native API. Put simply, three.js makes our lives a lot easier.

We can include it, just like any normal script in our HTML document, like so:

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r63/three.min.js"></script>

Here we’ve used a CDN, but you could use a local version. We then need to make sure that WebGL has something to render onto. Here we have some flexibility: we can use an ordinary div or canvas to render directly into the HTML, otherwise we can create and append the canvas later using JavaScript. We’ll go with the first method, to make things a little easier:

<body>
    <div id="container"></div>
    <script src="earth.js"></script>
</body>

After adding the link to the JavaScript file, our HTML is more-or-less done for now.

The Setup

Three.js itself tends to set things up much like a real 3D desktop program might. We have a scene in which things live, a camera with which to view them, some lighting, a renderer to actually render things, and of course the 3D objects themselves. The list can seem a little daunting, but all of these can take shape as variables within our earth.js JavaScript file.

Continue reading this article on SitePoint

I just browsed through this article, but from what I noticed it seems really cool to create the planet like this with only HTML, CSS and JavaScript! Really neat.
I thought of what would I use something like this for and my mind set off…

Since I am interested in sustainable communities across the globe I would perhaps map various communities onto a globe creating hundreds of dots to which a user could click each and every dot to learn more about the community in the specific location. It would be a worldwide sustainable community gathering giving the chance for anyone interested learn about any community across the globe. Hundreds of dots would slowly grow into thousands of dots. Creating a broader sustainable world for all of us to learn more about and to take part in.

Have a great day! Thank you for the inspiration!

That’s a really great idea @paaljoachim! WebGL has a lot of beautiful applications for this kind of thing. Google has made a number of interesting Chrome experiments with this technology and a lot of it blows my mind.

Have you ever seen Cesium.js? It’s a great WebGL 3D globe.

This is pretty neat. I’m pretty sure that in the last example, you don’t want to offset the mesh position with earthMesh.position.set(-100, 0, 0);. The sphere is currently not at the center of the camera, so when you spin it around with the orbital control, it looks a little weird. (More noticeable if you set the camera close to the earth)

I had to build something similar two years ago : https://www.chromeexperiments.com/experiment/cnes-satellites .

Adding another layer with the clouds really improve the general look and feel of the globe. You should try it :smile: