A Basic 3D Model Rendering with three.js

This is a simple 3D rendering inspired by Transmit website. It uses three.js, a JavaScript library based on WebGL that's easy to set up and provides various functionalities for 3D graphics.

Modeling

Modeling was done through C4D. The main idea was to have a sphere and select all the faces that map to land and extrude them out. I downloaded a world map and used it as a texture for a regular sphere so that I had a good reference I could work on. Selecting faces was the most tedious and time-consuming part of the whole project, espeically when dealing with those small islands in Southeast Asia. But later I found that it didn't really need to be precise as I was going to low-poly it anyway...

Since my reference image was a satellite map where it shows parts of the land close to the poles are covered by snow, I decided to map them seperately and extrude them a little bit more so it creates a feeling of snow covering the ground. Finally, just throw everything into a Polygon Reduction object and C4D will do the low poly trick for you.

Coding

three.js webisite has a Getting Started Tutorial which pretty much explains everything.
Some tips/changes I made for my case:

Using Orthographic (Parallel) Projection

I used orthographic projection instead of perspective to get a miniature look. To create an OrthographicCamera:

var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);

The first 4 parameters define the boundary, and the corrdinate system has its origin at the center of your canvas.

Loading External .obj Files

three.js provides a bunch of primitive geometries but it would be easier if you do the modeling in a software and import your model into the scene. Supported external file formats include .obj and .stl. In my case, I used .obj files:

var loader = new THREE.OBJLoader();
loader.load(
	url,
	function ( object ) {
		// called when resource is loaded
	}
);

Optimization for High DPI Displays

By default, WebGLRenderer renders at a @1x resolution. As a result, renderings on high DPI displays (e.g. Macs with Retina Display) will look blurry because of the higher pixel density they render at. This can be fixed by adjusting the pixel ratio of the renderer:

renderer.setPixelRatio(window.devicePixelRatio);