Getting Started with Three.js (3D Earth) - Part II

In previous post of this series we learned the very basics of Three.js. If you are just getting started with Threejs then i would suggest you give my previous post a read before going forward through this one.


In this post, we will be looking at some more features and api's that Three.js provides to make real life looking objects. At the end of this post we should have a real life like 3D modal of Earth.

Lets get started

We will be using the scene setup from the previous post and turn the existing sphere into a 3D Earth modal.

The previous example looked like this at the end.

At the end of this tutorial we will have something like this:


We are going to see how we can create Mesh Materials and apply it to a geometry, in our case it will be ShpereGeometry.

Firstly we setup a scene, like we did in the previous post. Next we create a 3D Group object which acts as the container for 3D Earth sphere. The advantage of creating a THREE.Object3D is that we can apply rotational changes to the group at once rather then applying to individual objects in cases where we have many layers.

var group = new THREE.Object3D();

//Also we going to use THREE.Clock, which is provided by threejs to help keep track fo time. This will be used in 'render' function

var clock = new THREE.Clock(); 

To have some light in our scene, we need to add some lighting through threejs, we can do so by using AmbientLight and PointLight constructors of three.js. There are other types of lighting available, you can read about them in detail here.

var ambientLight = new THREE.AmbientLight(0xFFFF99);
scene.add(ambientLight);

var light = new THREE.PointLight(0xFFFFFF, 1, 0);
light.position.set(0, 0, 0);
scene.add(light);

Now we need to create a sphere, to which will be applying the Mesh material we make in next step.

var geometry = new THREE.SphereGeometry(2, 64, 64);

To make Mesh Material we will first load some textures from images to pass in the Mesh constructor.

  • Base Texture - The base layer

var texture = THREE.ImageUtils.loadTexture("https://s3-ap-southeast-1.amazonaws.com/article-assets/threejs/earth_atmos_2048.jpg");
  • Bump Texture - Defines the bumps in the map, like mountains.

var bumpTexture = THREE.ImageUtils.loadTexture('https://s3-ap-southeast-1.amazonaws.com/article-assets/threejs/earthbump1k.jpg');

We will now create a THREE.MeshPhongMaterial and pass the loaded textures into the constructors, along with some other options as below.

var material = new THREE.MeshPhongMaterial({
    color: 0xaaaaaa,
    ambient: 0xaaaaaa,
    specular: 0x333333,
    map: texture,
    bumpMap: bumpTexture,
    bumpScale: 0.2,
    shininess: 10
});

We are almost done with look of our 3D Earth, the only thing which remains is to apply the material to our geometry and adding the group to the scene so that it can be drawn.

var earth = new THREE.Mesh(geometry, material);
earth.rotation.z = 23.439281 * Math.PI / 180; //Tilting the earth to make it real
group.add(earth);
scene.add(group);

Last thing we need to do is write our render function, we also define any movements/animations in this function itself.

function render() {
    requestAnimationFrame(render);

    var delta = clock.getDelta();
    group.rotation.y += 1 * delta;

    var time = clock.getElapsedTime() * 0.5;
    group.position.x = Math.cos(time) * 5;
    group.position.z = Math.sin(time) * 5;

    renderer.render(scene, camera);
}

render();

In the above function, we get the delta from the THREE.Clock object we initiated at the start of this tutorial. Using the delta we define the rotational movement on the y-axis of the group object. Also we define the movement along the z and x-axis using the cos and sin methods passing in the elapsed time which we get from the clock object again.


That's all folks for Part-II of Getting started with Three.js series. If you have any questions regarding anything above or any suggestions then please drop a comment below.

In next part, we would try and build a 3d game with three.js.

comments powered by Disqus