three.js dev template - module

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>3D Earth View</title>
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div id="earth_container"></div>
  </body>

</html>

CSS

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

canvas {
  display: block;
}

.label {
  color: #FFF;
  font-family: sans-serif;
  padding: 2px;
  background: rgba(0, 0, 0, .6);
}

      .dot {
        margin-top: -.08em;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        position: relative;
      }

      label {
        font-family: monospace;
        background-color: black;
        padding: 2px 6px !important;
        color: white;
        font-size: 1.2em;
        border-radius: 5px;
      }

      label:hover {
        cursor: pointer;
      }

      .label_top_left {
        position: absolute;
        bottom: 8px;
        right: 8px;
      }

      .label_top_right {
        position: absolute;
        bottom: 8px;
        left: 8px;
      }

      .label_bottom_left {
        position: absolute;
        top: 8px;
        right: 8px;
      }

      .label_bottom_right {
        position: absolute;
        top: 8px;
        left: 8px;
      }

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {
  OrbitControls
} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import {
  CSS2DRenderer,
  CSS2DObject
} from 'https://threejs.org/examples/jsm/renderers/CSS2DRenderer.js';
/* Update/Add site values here, and they will display on earth view */
var sites = [{
    name: "EAS",
    lat: 52.723655,
    lon: 174.110386,
    status: "FMC"
  },
  {
    name: "SBX",
    lat: 20.830274,
    lon: -161.440808,
    status: "FMC"
  },
  {
    name: "CLR",
    lat: 64.303665,
    lon: -149.147894,
    status: "FMC"
  },
  {
    name: "FGA",
    lat: 63.955199,
    lon: -145.730310,
    status: "FMC"
  },
  {
    name: "BAFB",
    lat: 39.111117,
    lon: -121.356624,
    status: "PMC"
  },
  {
    name: "VAFB",
    lat: 34.741921,
    lon: -120.572419,
    status: "NMC"
  },
  {
    name: "BO",
    lat: 40.022338,
    lon: -105.244441,
    status: "FMC"
  },
  {
    name: "PAFB",
    lat: 38.823895,
    lon: -104.699889,
    status: "FMC"
  },
  {
    name: "CMD",
    lat: 38.744553,
    lon: -104.845644,
    status: "NMC"
  },
  {
    name: "BU",
    lat: 39.704029,
    lon: -104.753561,
    status: "FMC"
  },
  {
    name: "MDIOC",
    lat: 38.816250,
    lon: -104.536001,
    status: "NMC"
  },
  {
    name: "FTD",
    lat: 44.057085,
    lon: -75.751386,
    status: "FMC"
  },
  {
    name: "COD",
    lat: 41.755031,
    lon: -70.539847,
    status: "FMC"
  },
  {
    name: "THL",
    lat: 76.533407,
    lon: -68.698400,
    status: "NMC"
  },
  {
    name: "FYL",
    lat: 54.361811,
    lon: -0.669995,
    status: "FMC"
  }
];

//THREE JS setup variables
var camera, scene, renderer, labelRenderer, earth;

init();
animate();

function init() {

  const EARTH_RADIUS = 225;
  const EARTH_SEGMENTS = 75;
  const EARTH_RINGS = 75;

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
  camera.position.set(-70, 375, 450);
  scene = new...