JSFiddle - React, Tailwind, and code Playground

by bilelz

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://threejs.org/build/three.js">


</script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://s3-eu-west-2.amazonaws.com/bckld/lab/loading.js"></script>

<script src="http://stemkoski.github.io/Three.js/js/Detector.js"></script>
<script src="http://stemkoski.github.io/Three.js/js/THREEx.KeyboardState.js"></script>
<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/src/core/Raycaster.js"></script>
<script src="http://stemkoski.github.io/Three.js/js/THREEx.WindowResize.js"></script>

CSS

body {
  background: #000;
  margin: 0;
  overflow: hidden;
}

.hudLabel {
  position: absolute;
  top: 0;
  left: 0;
  color: #000;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 15px;
  font-weight: normal;
  line-height: 24px;
  text-align: left;
  padding: 3px;
  -webkit-box-shadow: 0px 4px 8px -3px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 4px 8px -3px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.75);
  background: rgba( 255, 255, 255, 0.8);
  display: none;
}

JavaScript

function _convertLatLonToVec3(lat, lon) {
  lat = lat * Math.PI / 180.0;
  lon = -lon * Math.PI / 180.0;
  return new THREE.Vector3(
    Math.cos(lat) * Math.cos(lon),
    Math.sin(lat),
    Math.cos(lat) * Math.sin(lon));
}

function InfoBox(city, radius, domElement) {
  this._screenVector = new THREE.Vector3(0, 0, 0);

  this.position = _convertLatLonToVec3(city.lat, city.lng).multiplyScalar(radius);

  // create html overlay box
  this.box = document.createElement('div');
  this.box.innerHTML = city.name;
  this.box.className = "hudLabel";

  this.domElement = domElement;
  this.domElement.appendChild(this.box);

}

InfoBox.prototype.update = function() {
  this._screenVector.copy(this.position);
  this._screenVector.project(camera);

  var posx = Math.round((this._screenVector.x + 1) * this.domElement.offsetWidth / 2);
  var posy = Math.round((1 - this._screenVector.y) * this.domElement.offsetHeight / 2);

  var boundingRect = this.box.getBoundingClientRect();

  // update the box overlays position
  this.box.style.left = (posx - boundingRect.width) + 'px';
  this.box.style.top = posy + 'px';
};

//--------------------------------
function Marker() {
  THREE.Object3D.call(this);

  var radius = 0.005;
  var sphereRadius = 0.02;
  var height = 0.05;

  var material = new THREE.MeshPhongMaterial({
    color: 0xDC143C
  });

  var cone = new THREE.Mesh(new THREE.ConeBufferGeometry(radius, height, 8, 1, true), material);
  cone.position.y = height * 0.5;
  cone.rotation.x = Math.PI;

  var sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(sphereRadius, 16, 8), material);
  sphere.position.y = height * 0.95 + sphereRadius;


  this.add(cone, sphere);
}

Marker.prototype = Object.create(THREE.Object3D.prototype);

// ------ Earth object -------------------------------------------------

function Earth(radius, texture) {
  THREE.Object3D.call(this);

  this.userData.radius = radius;

  var earth = new THREE.Mesh(
    new THREE.SphereBufferGeometry(radius, 64.0,...