JSFiddle - React, Tailwind, and code Playground

by nxtwrld

HTML

<script src="https://dl.dropboxusercontent.com/u/7681465/earth.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.16/d3.geo.projection.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/7681465/world.js"></script>
<div class="map">

</div>

CSS

canvas {
  width: 100%;
  height: 100%
}
svg {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.map {
  position: relative;
  width: 600px;
  height: 500px;
  background: #000;
}
.land {
  fill: none;
  stroke: #FFF;
  stroke-width: 1px;
  opacity: .5;
}

JavaScript

var image = new Image();
image.src = earthTexture;

var earthThreeTexture = new THREE.Texture();
earthThreeTexture.image = image;
image.onload = function() {
	earthThreeTexture.needsUpdate = true;
};

var renderer	= new THREE.WebGLRenderer({
  antialias	: true
});


var mapElement = document.querySelector('.map')

renderer.setSize(  mapElement.offsetWidth,  mapElement.offsetHeight );
mapElement.appendChild( renderer.domElement );

renderer.shadowMap.enabled	= true

// 3D scene and camera
var scene	= new THREE.Scene();
var camera	= new THREE.PerspectiveCamera(45, mapElement.offsetWidth / mapElement.offsetHeight, 0.01, 1000 );
camera.position.z = 2;

// light
scene.add(new THREE.AmbientLight(0x333333));
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5,3,5);
scene.add(light);


// WebGL earth
var geometry = new THREE.SphereGeometry(0.5, 32, 32)
var material = new THREE.MeshLambertMaterial({
  map : earthThreeTexture,
});

var earth = new THREE.Mesh(geometry, material)
earth.rotation.x = 0.5;
earth.rotation.y = 4.5;
scene.add(earth);


// d3 earth setup
var width = 600,
    height = 500,
    sens = 0.25,
    pi = Math.PI;

// drag to rotate
var drag = d3.behavior.drag()
.origin(function() { var r = projection.rotate(); return {x: r[0] / sens, y: -r[1] / sens}; })
.on("drag", function() {

  var λ = d3.event.x * sens,
      φ = -d3.event.y * sens,
      rotate = projection.rotate();
  //Restriction for rotating upside-down
  φ = φ > 60 ? 60 :
  φ < -60 ? -60 :
  φ;
  λ = (λ < -180) ? λ + 360 :
  (λ > 180)  ? λ - 360 :
  λ;

  projection.rotate([λ, φ]);
	// update WebGL earth
  earth.rotation.y = (λ-90) * Math.PI / 180;
  earth.rotation.x = 0 - ((φ) * Math.PI / 180);

});

// satellite projectio
var projection = d3.geo.satellite()
.tilt(1)
.distance(4.5)
.scale(198)
.rotate([-12.5, -28.5])
.translate([width / 2, height / 2])
.precision(.1)
.clipAngle(65);

var scale0 = projection.scale();


//Setup zoom behavior
var zoom =...