JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>
<!DOCTYPE html>
<html>
<title>Globe-Three-d3-topojson</title>
<head>
  <script src = '/resources/libs/three.min.js'></script>
  <script src = '/resources/libs/d3.v5.min.js'></script>
  <script src = '/resources/libs/topojson.v3.min.js'></script>
</head>
<body>
  <div id='rovatContainer'></div>
  <script type='text/javascript' src='/dev/threeTopoGlobe1.js'></script>
</body>
</html>

JavaScript

/*
 Globe.
*/
/* global THREE d3 topojson */
Promise.resolve(d3.json('https://unpkg.com/[email protected]/world/110m.json').then((topology) => {
  // let mesh;
  // let graticule;
  const width = window.innerWidth;
  const height = window.innerHeight;
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);

  const camera = new THREE.PerspectiveCamera(70, width / height, 1, 2000);
  // scene.add(camera);
  camera.position.set(0, 35, 70);
  camera.position.z = 600;

  const renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  function vertex([longitude, latitude]) {
    const radius = 228;
    const lambda = longitude * Math.PI / 180;
    const phi = latitude * Math.PI / 180;
    return new THREE.Vector3(
      radius * Math.cos(phi) * Math.cos(lambda),
      radius * Math.sin(phi),
      -radius * Math.cos(phi) * Math.sin(lambda),
    );
  }

  function wireframe(multilinestring, material) {
    const geometry = new THREE.Geometry();
    multilinestring.coordinates.forEach((line) => {
      d3.pairs(line.map(vertex), (a, b) => {
        geometry.vertices.push(a, b);
      });
    });
    return new THREE.LineSegments(geometry, material);
  }

  function graticule10() {
    const ep = 1e-6;
    const x1 = 180; const x0 = -x1; const y1 = 80; const y0 = -y1; const dx = 10; const dy = 10;
    const X1 = 180; const X0 = -X1; const Y1 = 90; const Y0 = -Y1; const DX = 90; const DY = 360;

    function graticuleX() {
      const y = d3.range(y0, y1 - ep, dy).concat(y1);
      return function ymap(x) { return y.map(y => [x, y]); };
    }

    function graticuleY() {
      const x = d3.range(x0, x1 - ep, dx).concat(x1);
      return function xmap(y) { return x.map(x => [x, y]); };
    }

    const x = graticuleX(y0, y1, 2.5); const y = graticuleY(x0, x1, 2.5);
    const X = graticuleX(Y0, Y1, 2.5); const
      Y =...