JSFiddle - React, Tailwind, and code Playground

by 3ozPoundCake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<!--Scroll in with mousewheel-->

JavaScript

var camera, controls, scene, renderer, geometry, material, mesh;
var objects = [];

var radiusOfPlanet = 3396190; //(m)
var radiusScale = 1; //1 unit is radiusScale meters
// does scale even matter?
var scale = 0.0001;
var NEAR = 1 * scale;
var FAR = 5.0 * 1e7 * scale;

//irrelevant to mesh
var radius = 0.0001 * scale;

var tileRes = 32;

var anglePlane = 0.0001; //0.001 is like a 60m wide tile?
//var anglePlane = 180; //180 is a hemisphere

init();
animate();

function init() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, NEAR, FAR);
  camera.position.z = -500;
  scene.add(camera);

  controls = new THREE.OrbitControls(camera);
  controls.enableDamping = true;
  controls.enableZoom = true;
  controls.damping = 0.1;
  //controls.addEventListener( 'change', render );
  
  geometry = new THREE.PlaneBufferGeometry(radius, radius, tileRes - 1, tileRes - 1);
  material = new THREE.MeshBasicMaterial({
    color: 0x000000,
    wireframe: true
  });
  mesh = new THREE.Mesh(geometry, material);

  mesh.position.x = 0;
  mesh.position.y = 0;//0.0339;
  mesh.position.z = 0;
  //mesh.frustumCulled = false;

  for (var p = 0; p < mesh.geometry.attributes.position.array.length; p += 3) {
    var xyzPos = lonLatToVector3(0 + (((p / 3) % tileRes) / (tileRes - 1)) * anglePlane,
      0 + (parseInt((p / 3) / tileRes) / (tileRes - 1)) * anglePlane,
      0);

    mesh.geometry.attributes.position.array[p] = xyzPos.x;
    mesh.geometry.attributes.position.array[p + 1] = xyzPos.y;
    mesh.geometry.attributes.position.array[p + 2] = xyzPos.z - radiusOfPlanet;
    //
    //mesh.geometry.attributes.position.array[p + 2] = 0; //<--
  }
  mesh.geometry.attributes.position.needsUpdate = true;
  mesh.geometry.verticesNeedUpdate = true;
  mesh.geometry.computeFaceNormals();
  mesh.geometry.computeVertexNormals();
  mesh.geometry.computeBoundingSphere();
  scene.add(mesh);
  objects.push(mesh);

  // 0 is the object closest...