Roll back ThreeJS version and other tweaks

package.json

@@ -22,14 +22,14 @@
   },
   "devDependencies": {
     "@types/luxon": "^3.3.8",
-    "@types/three": "^0.160.0",
+    "@types/three": "^0.157.2",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@yushijinhun/three-minifier-rollup": "^0.4.0",
     "eslint": "^8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.29.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "three": "^0.160.0",
+    "three": "^0.157.0",
     "typescript": "^5.2.2",
     "vite": "^5.0.11"
   }

src/index.ts

@@ -1,17 +1,18 @@
 import axios from 'axios';
 import { createViewer } from './viewer/index';
 import defaultConfig from './config';
-import { setLogLevel } from './utils/logger';
+import logger, { setLogLevel } from './utils/logger';
 
 import hud from './hud';
 
 async function loadConfig () {
   const baseUrl = './';
-  const response = await axios.get(`${baseUrl}/config.json`);
+  const response = await axios.get(`${baseUrl}config.json`);
   let config = defaultConfig;
   if (response.data) {
     config = { ...defaultConfig, ...response.data };
   }
+  logger.info(`.... ${config.baseUrl}`);
   return config;
 }
 

src/viewer/Earth.ts

@@ -1,4 +1,4 @@
-import { ShaderMaterial, UniformsUtils } from 'three';
+import { ShaderMaterial, UniformsUtils, Texture } from 'three';
 import { Color, TextureLoader, MeshPhongMaterial, SphereGeometry, Mesh, Group, BackSide, AdditiveBlending } from '../utils/three';
 import SceneComponent from './interfaces/SceneComponent';
 import SatelliteOrbitScene from './SatelliteOrbitScene';
@@ -14,10 +14,22 @@ class Earth implements SceneComponent {
   sphere: Mesh | undefined = undefined;
   group: Group | undefined = undefined;
 
-  initClouds (scene: SatelliteOrbitScene, group: Group) {
+  private async loadTexture (textureUrl: string): Promise<Texture> {
+    const loader = new TextureLoader();
+    return new Promise ((resolve, reject) => {
+      loader.load(
+        textureUrl,
+        texture => resolve(texture),
+        undefined,
+        error => reject(error)
+      );
+    });
+  }
+
+  async initClouds (scene: SatelliteOrbitScene, group: Group) {
     // this isn't a great implementation of the clouds,
     // so will leave off by default
-    const texture = new TextureLoader().load(`${this.basePath}/Earth_Cloud.jpg`);
+    const texture = await this.loadTexture(`${this.basePath}/Earth_Cloud.jpg`);
 
     const radius = scene.km2pixels(this.radiusInKm + 0.02);
     const geometry = new SphereGeometry(radius, 32, 32);
@@ -79,18 +91,18 @@ class Earth implements SceneComponent {
     group.add(mesh);
   }
 
-  init (scene: SatelliteOrbitScene, context: Record<string, any>) {
+  async init (scene: SatelliteOrbitScene, context: Record<string, any>) {
     if (context.config) {
       this.baseUrl = context.config.baseUrl;
     }
 
     this.group = new Group();
 
     const basePath = `${this.baseUrl}images`;
-    const dayTexture = new TextureLoader().load(`${basePath}/earth-blue-marble.jpg`);
-    const nightTexture = new TextureLoader().load(`${basePath}/nightearth-4096.png`);
-    const bumpTexture = new TextureLoader().load(`${basePath}/8081_earthbump4k.jpg`);
-    const earthSpecularMap = new TextureLoader().load(`${basePath}/earth-water.png`);
+    const dayTexture = await this.loadTexture(`${basePath}/earth-blue-marble.jpg`);
+    const nightTexture = await this.loadTexture(`${basePath}/nightearth-4096.png`);
+    const bumpTexture = await this.loadTexture(`${basePath}/8081_earthbump4k.jpg`);
+    const earthSpecularMap = await this.loadTexture(`${basePath}/earth-water.png`);
 
     const dayMaterial = new MeshPhongMaterial({
       map: dayTexture,

src/viewer/ShaderStore.ts

@@ -2,7 +2,8 @@ import logger from '@/utils/logger';
 import axios from 'axios';
 
 class ShaderStore {
-  baseUrl = 'shaders/';
+  basePath = 'shaders/';
+  baseUrl = `./${this.basePath}`;
   shaders = [
     'earth-fragment',
     'earth-vertex',
@@ -18,7 +19,7 @@ class ShaderStore {
   shaderData: Record<string, string> = {};
 
   constructor (appBaseUrl = '') {
-    this.baseUrl = `${appBaseUrl}${this.baseUrl}`;
+    this.baseUrl = `${appBaseUrl}${this.basePath}`;
   }
 
   private async loadShader (shaderFile: string): Promise<string> {

src/viewer/index.ts

@@ -43,9 +43,11 @@ class Viewer {
   earth?: Earth;
   mouseMoved = false;
   targetZoom = 5;
+  minZoomLevel = 1;
+  maxZoomLevel = 10;
 
   constructor (config?: Record<string, any>) {
-    this.config = { ...config, ...this.config };
+    this.config = { ...this.config, ...config };
   }
 
   async registerSceneComponent (name: string, sceneComponent: SceneComponent) {