JSFiddle - React, Tailwind, and code Playground

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>
  <script src="js/main.js"></script>

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 Earth(radius, texture) {
  THREE.Object3D.call(this);

  this.userData.radius = radius;

  var earth = new THREE.Mesh(
    new THREE.SphereBufferGeometry(radius, 64.0, 48.0),
    new THREE.MeshPhongMaterial({
      map: texture
    })
  );

  this.add(earth);
}

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

var scene, camera, renderer, label;
var controls;

init();

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, 4 / 3, 0.1, 100);
  camera.position.set(0.0, 1.5, 3.0);

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

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.autoRotate = true;
  controls.autoRotateSpeed = .5;
  controls.enablePan = false;

  var ambient = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambient);

  var direcitonal = new THREE.DirectionalLight(0xffffff, 0.5);
  direcitonal.position.set(5.0, 2.0, 5.0).normalize();
  scene.add(direcitonal);

  // just some code for the loading
  var manager = createLoader(renderer.domElement, animate);

  var texLoader = new THREE.TextureLoader(manager).setCrossOrigin(true);

  var texture = texLoader.load('https://s3-eu-west-2.amazonaws.com/bckld/lab/textures/earth_latlon.jpg');
  texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

  var earth = new Earth(1.0, texture);

 
  scene.add(earth);

  //-------------
  // globe

  var radius1 = 1;

  var sphere1 = new THREE.Mesh(new THREE.SphereGeometry(radius1, 16, 16));
  scene.add( sphere1 );
  
  window.onmousedown = function( event ) 
{
  // the following line would stop any other event handler from firing
  // (such as the mouse's TrackballControls)
  // event.preventDefault();
  
  const rect =...