three.js dev template - module

HTML

<head>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.138.0/build/three.module.js",
                "OrbitControls": "https://unpkg.com/three@0.138.0/examples/jsm/controls/OrbitControls.js"
            }
        }
    </script>
</head>

<body>
    <div id="loader"></div>
    <div id="main-screen" style="display: none"></div>
    
</body>

CSS

@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");

* {
  box-sizing: border-box;
}

body {
  /* overflow: hidden; */
  margin: 0px;
  padding: 0;
}

/* .c {
  width: 100%;
  height: 100%;
} */

#loader {
  border-top: 16px solid rgb(243, 158, 0);
  border-right: 16px solid green;
  border-bottom: 16px solid rgb(55, 53, 180);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 45%;
  left: 45%;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#debug1 {
  position: absolute;
  display: none;
  font-size: 14px;
  left: 0px;
  top: 50px;
  border: 1px solid red;
  width: 310px;
  height: 310px;
  padding: 5px;
  color: white;
  pointer-events: none;
  font-family: "Orbitron", sans-serif;
}

canvas {
  display: none;
}

JavaScript

// Simple three.js example

import * as THREE from "https://threejs.org/build/three.module.js";
import { ArcballControls } from "https://threejs.org/examples/jsm/controls/ArcballControls.js";

let camera, renderer;
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xefd1b5);


let _meshMaterial;

const terrainDimension = new THREE.Vector2(4104, 232);
const terrainChunkDimension = new THREE.Vector2(1024, 58);

const chunkCount= new THREE.Vector2(
  Math.ceil(terrainDimension.x / terrainChunkDimension.x),
  Math.ceil(terrainDimension.y / terrainChunkDimension.y)
);

let controls= null;
const lod = new THREE.LOD();

async function extract_height_data() {
  const height_data_response = await fetch("https://raw.githubusercontent.com/pravinpoudel/three.js-boilerplate/main/dist/client/resources/smallElevation.json");

  if (!height_data_response.ok) {
    const message = `An error has occured: ${height_data_response.status}`;
    throw new Error(message);
  }
  const data2 = await height_data_response.json();
  const smallJsonData = data2.slice(0, 952128);
  return data2;
}


async function init() {
  scene.position.set(0, 0, 0); // it is default value but for sanity
  camera = new THREE.PerspectiveCamera(
    90,
    window.innerWidth / window.innerHeight,
    0.1,
    50000
  );
  camera.position.set(100, 800, -4000);
  camera.lookAt(-100, 810, -800);

  // check if antialias with tax the computer
  renderer = new THREE.WebGLRenderer({ antialias: true });

  renderer.gammaInput = true;
  renderer.gammaOutput = true;
  renderer.shadowMap.enabled = true;
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);

  let mainscreen = document.getElementById("main-screen");
  mainscreen.appendChild(renderer.domElement);

  controls = new ArcballControls(camera, renderer.domElement, scene);
  controls.addEventListener("change", render);

  window.addEventListener("resize", onWindowResize, false);
  let...