<body>

</body
html, body{
  height:100%;
  font-family: Helvetica;
}

body { 
   margin:0; 
   padding:0; 
}

canvas {
   background: #CCCCCC;
}
// Render GeoJSON features on a spherical object.
// Create Three.js scene, camera, & light
var WIDTH = window.innerWidth - 30,
    HEIGHT = window.innerHeight - 30;
 
var angle = 75,
    aspect = WIDTH / HEIGHT,
    near = 0.5,
    far = 1000;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(angle, aspect, near, far);

// Renderer the canvas
var renderer = new THREE.WebGLRenderer();
renderer.setSize( WIDTH, HEIGHT);
renderer.setClearColor( 0x555555, 1);
document.body.appendChild(renderer.domElement);

// create a point light (goes in all directions)
scene.add(new THREE.AmbientLight(0x71ABEF));
var pointLight = new THREE.PointLight(0x666666);
// set its position
pointLight.position.x = 60;
pointLight.position.y = 50;
pointLight.position.z = 230;
scene.add(pointLight);

// Create a sphere to make visualization easier.
var geometry = new THREE.SphereGeometry(10,32,32);
var material = new THREE.MeshPhongMaterial({
	color: 0xDDDDDD,
	wireframe: false,
	transparent: true
});
 
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
sphere.castShadow = true;
sphere.receiveShadow = true;

//Draw the GeoJSON at THREE.ParticleSystemMaterial
var countries = $.getJSON("https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/countries_states.geojson", function (data) { 
  drawThreeGeo(data, 10, 'sphere', {
    color: 0x8B572A,
    skinning: true
  }); 
});

var rivers = $.getJSON("https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/rivers.geojson", function (data) { 
  drawThreeGeo(data, 10, 'sphere', {
    color: '#4A90E2'
  }); 
});

//Set the camera position
camera.position.z = 20;  

//Enable controls
controls = new THREE.TrackballControls(camera);
// Slow down zooming
controls.zoomSpeed = 0.1;

//Render the image
function render() {
  controls.update();
  requestAnimationFrame(render);    
  renderer.render(scene, camera);
 }

render();

External CSS

  1. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css
  2. https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/threeGeoJSON.js
  6. https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js
  7. https://code.jquery.com/jquery-1.10.2.min.js
  8. https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/TrackballControls.js