package-lock.json

@@ -11,9 +11,7 @@
         "three": "^0.147.0"
       },
       "devDependencies": {
-        "@types/dat.gui": "^0.7.9",
         "@types/three": "^0.146.0",
-        "dat.gui": "^0.7.9",
         "typescript": "^4.6.4",
         "vite": "^3.2.3",
         "vite-plugin-plain-text": "^1.2.1"
@@ -283,12 +281,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@types/dat.gui": {
-      "version": "0.7.9",
-      "resolved": "https://registry.npmjs.org/@types/dat.gui/-/dat.gui-0.7.9.tgz",
-      "integrity": "sha512-UiqZasQIask5cUwWOO6BgOjP1dNj9ChYtmeAb4WTKs5IJ7ha3ATRTeXY7/TzlmEZznh40lS6Ov5BdNA+tU+fWQ==",
-      "dev": true
-    },
     "node_modules/@types/three": {
       "version": "0.146.0",
       "resolved": "https://registry.npmjs.org/@types/three/-/three-0.146.0.tgz",
@@ -304,12 +296,6 @@
       "integrity": "sha512-IUMDPSXnYIbEO2IereEFcgcqfDREOgmbGqtrMpVPpACTU6pltYLwHgVkrnYv0XhWEcjio9sYEfIEzgn3c7nDqA==",
       "dev": true
     },
-    "node_modules/dat.gui": {
-      "version": "0.7.9",
-      "resolved": "https://registry.npmjs.org/dat.gui/-/dat.gui-0.7.9.tgz",
-      "integrity": "sha512-sCNc1OHobc+Erc1HqiswYgHdVNpSJUlk/Hz8vzOCsER7rl+oF/4+v8GXFUyCgtXpoCX6+bnmg07DedLvBLwYKQ==",
-      "dev": true
-    },
     "node_modules/esbuild": {
       "version": "0.15.18",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz",
@@ -1016,12 +1002,6 @@
       "dev": true,
       "optional": true
     },
-    "@types/dat.gui": {
-      "version": "0.7.9",
-      "resolved": "https://registry.npmjs.org/@types/dat.gui/-/dat.gui-0.7.9.tgz",
-      "integrity": "sha512-UiqZasQIask5cUwWOO6BgOjP1dNj9ChYtmeAb4WTKs5IJ7ha3ATRTeXY7/TzlmEZznh40lS6Ov5BdNA+tU+fWQ==",
-      "dev": true
-    },
     "@types/three": {
       "version": "0.146.0",
       "resolved": "https://registry.npmjs.org/@types/three/-/three-0.146.0.tgz",
@@ -1037,12 +1017,6 @@
       "integrity": "sha512-IUMDPSXnYIbEO2IereEFcgcqfDREOgmbGqtrMpVPpACTU6pltYLwHgVkrnYv0XhWEcjio9sYEfIEzgn3c7nDqA==",
       "dev": true
     },
-    "dat.gui": {
-      "version": "0.7.9",
-      "resolved": "https://registry.npmjs.org/dat.gui/-/dat.gui-0.7.9.tgz",
-      "integrity": "sha512-sCNc1OHobc+Erc1HqiswYgHdVNpSJUlk/Hz8vzOCsER7rl+oF/4+v8GXFUyCgtXpoCX6+bnmg07DedLvBLwYKQ==",
-      "dev": true
-    },
     "esbuild": {
       "version": "0.15.18",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz",

package.json

@@ -9,9 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/dat.gui": "^0.7.9",
     "@types/three": "^0.146.0",
-    "dat.gui": "^0.7.9",
     "typescript": "^4.6.4",
     "vite": "^3.2.3",
     "vite-plugin-plain-text": "^1.2.1"

src/atmosphere.ts

@@ -5,7 +5,6 @@ import {
   Object3D,
   ShaderMaterial,
   SphereGeometry,
-  Vector3,
 } from 'three';
 
 import { plainText as vertexShader } from './shaders/atmosphere.vert';
@@ -18,7 +17,7 @@ export class Atmosphere extends Object3D {
   public Scale = 1;
   public ScaleDepth = 0.25;
   public G = -0.95;
-  public Wavelength = new Vector3(0.65, 0.57, 0.475);
+  public Wavelength = [0.65, 0.57, 0.475];
 
   public geom?: SphereGeometry;
   public mesh?: Mesh;
@@ -36,30 +35,12 @@ export class Atmosphere extends Object3D {
     this.initialize();
   }
 
-  set planetRadius(radius: number) {
-    const thickness = this.thickness;
-    this.innerRadius = radius;
-    this.outerRadius = radius + thickness;
-    this.refreshScale();
-  }
-  get planetRadius() {
-    return this.innerRadius;
-  }
-
-  set thickness(thickness: number) {
-    this.outerRadius = thickness + this.innerRadius;
-    this.refreshScale();
-  }
-  get thickness() {
-    return this.outerRadius - this.innerRadius;
-  }
-
   setUniforms(shader: ShaderMaterial) {
     shader.uniforms.invWavelength = {
       value: [
-        1 / Math.pow(this.Wavelength.x, 4),
+        1 / Math.pow(this.Wavelength[0], 4),
-        1 / Math.pow(this.Wavelength.y, 4),
+        1 / Math.pow(this.Wavelength[1], 4),
-        1 / Math.pow(this.Wavelength.z, 4),
+        1 / Math.pow(this.Wavelength[2], 4),
       ],
     };
     shader.uniforms.outerRadius = { value: this.outerRadius };
@@ -79,18 +60,8 @@ export class Atmosphere extends Object3D {
   }
 
   initialize() {
-    if (this.geom) {
-      this.geom.dispose();
-      this.mesh && this.remove(this.mesh);
-    }
     this.geom = new SphereGeometry(this.outerRadius, 128, 128);
     this.mesh = new Mesh(this.geom, this.shader);
     this.add(this.mesh);
   }
-
-  private refreshScale() {
-    this.Scale = 1 / (this.outerRadius - this.innerRadius);
-    this.setUniforms(this.shader);
-    this.initialize();
-  }
 }

src/globe.ts

@@ -7,7 +7,6 @@ import {
   Color,
   DirectionalLight,
   ShaderMaterial,
-  MeshPhongMaterial,
 } from 'three';
 
 import { plainText as vertexShader } from './shaders/earth.vert';
@@ -15,31 +14,15 @@ import { plainText as fragmentShader } from './shaders/earth.frag';
 import { Atmosphere } from './atmosphere';
 
 export class Globe extends Object3D {
-  private sphere?: SphereGeometry;
+  private sphere = new SphereGeometry(1, 128, 128);
-  private clouds = new SphereGeometry(1.02, 64, 64);
+  private atmosphere = new Atmosphere(1, 1.05);
-  public atmosphere = new Atmosphere(1, 1.05);
+  private earthMaterial?: ShaderMaterial;
-  public earthMaterial?: ShaderMaterial;
   public earthMesh?: Mesh;
-
   private loader = new TextureLoader();
 
-  constructor(private planetRadius: number) {
-    super();
-  }
-
-  set radius(radius: number) {
-    this.planetRadius = radius;
-    this.atmosphere.planetRadius = radius;
-    this.earthMaterial && this.atmosphere.setUniforms(this.earthMaterial);
-    this.createMesh();
-  }
-  get radius() {
-    return this.planetRadius;
-  }
-
   public async loadTexture(name: string) {
     return new Promise<Texture>((resolve, reject) => {
-      this.loader.load(`./${name}`, resolve, undefined, reject);
+      this.loader.load(`/${name}`, resolve, undefined, reject);
     });
   }
 
@@ -72,19 +55,10 @@ export class Globe extends Object3D {
 
     this.atmosphere.setUniforms(this.earthMaterial);
     this.atmosphere.setLight(light);
-    this.createMesh();
+    this.earthMesh = new Mesh(this.sphere, this.earthMaterial);
+    this.add(this.earthMesh);
     this.add(this.atmosphere);
   }
 
   public tick() {}
-
-  private createMesh() {
-    if (this.sphere) {
-      this.sphere.dispose();
-      this.earthMesh && this.remove(this.earthMesh);
-    }
-    this.sphere = new SphereGeometry(this.planetRadius, 128, 128);
-    this.earthMesh = new Mesh(this.sphere, this.earthMaterial);
-    this.add(this.earthMesh);
-  }
 }

src/main.ts

@@ -3,7 +3,6 @@ import { Renderer } from './renderer';
 import { DirectionalLight } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import './style.css';
-import { GUI } from 'dat.gui';
 
 const main = new Renderer();
 
@@ -11,7 +10,7 @@ const dirLight = new DirectionalLight(0xffffff, 1);
 dirLight.position.set(10, 10, 10);
 main.scene.add(dirLight);
 
-const globe = new Globe(1);
+const globe = new Globe();
 main.resize();
 globe.initialize(dirLight).catch(console.error);
 main.scene.add(globe);
@@ -20,58 +19,6 @@ main.camera.position.set(0, 0, 2);
 
 const control = new OrbitControls(main.camera, main.canvas);
 
-const gui = new GUI();
-const atmosGui = gui.addFolder('Atmosphere');
-const updateAtmosShader = () => {
-  globe.atmosphere.setUniforms(globe.atmosphere.shader);
-  globe.atmosphere.setUniforms(globe.earthMaterial!);
-};
-// any's because for some reason the generic expects a string indexed record
-atmosGui
-  .add<any>(globe.atmosphere.Wavelength, 'x', 0, 1)
-  .name('R')
-  .onChange(updateAtmosShader);
-atmosGui
-  .add<any>(globe.atmosphere.Wavelength, 'y', 0, 1)
-  .name('G')
-  .onChange(updateAtmosShader);
-atmosGui
-  .add<any>(globe.atmosphere.Wavelength, 'z', 0, 1)
-  .name('B')
-  .onChange(updateAtmosShader);
-
-atmosGui
-  .add<any>(globe.atmosphere, 'thickness', 0.001, 0.5)
-  .name('Thickness')
-  .onChange(updateAtmosShader);
-atmosGui
-  .add<any>(globe.atmosphere, 'ScaleDepth', 0.01, 1)
-  .name('Scale depth')
-  .onChange(updateAtmosShader);
-atmosGui
-  .add<any>(globe.atmosphere, 'Rayleigh', 0.0001, 0.01)
-  .onChange(updateAtmosShader);
-atmosGui
-  .add<any>(globe.atmosphere, 'Mie', 0.0001, 0.01)
-  .onChange(updateAtmosShader);
-atmosGui
-  .add<any>(globe.atmosphere, 'Exposure', 0, 100)
-  .onChange(updateAtmosShader);
-atmosGui.open();
-
-const planetGui = gui.addFolder('Planet');
-planetGui
-  .add<any>(globe.rotation, 'x', -Math.PI * 2, Math.PI * 2, 0.01)
-  .name('Rotation X');
-planetGui
-  .add<any>(globe.rotation, 'y', -Math.PI * 2, Math.PI * 2, 0.01)
-  .name('Rotation Y');
-planetGui
-  .add<any>(globe.rotation, 'z', -Math.PI * 2, Math.PI * 2, 0.01)
-  .name('Rotation Z');
-// planetGui.add<any>(globe, 'radius', 1, 100).name('Radius');
-planetGui.open();
-
 function tick() {
   requestAnimationFrame(tick);
   control.update();

src/shaders/earth.vert

@@ -1,16 +1,10 @@
 #define EARTH
-#include <common>
-#include <normal_pars_vertex>
-
 varying vec3 vViewPosition;
 varying vec3 vLightDirection;
 varying vec2 vUv;
 varying vec3 vEyeNormal;
-
+#include <common>
-varying vec3 v3Direction;
+#include <normal_pars_vertex>
-varying vec3 c0;
-varying vec3 c1;
-
 uniform vec3 light;
 
 uniform vec3 invWavelength;  // 1 / pow(wavelength, 4) for the red, green, and blue channels
@@ -25,6 +19,10 @@ uniform float scaleDepth;    // The scale depth (i.e. the altitude at which the
 const int nSamples = 2;
 const float fSamples = 1.0;
 
+varying vec3 v3Direction;
+varying vec3 c0;
+varying vec3 c1;
+
 float dscale(float fCos) {
   float x = 1.0 - fCos;
   return scaleDepth * exp(-0.00287 + x * (0.459 + x * (3.83 + x * (-6.80 + x * 5.25))));

vite.config.js

@@ -3,5 +3,4 @@ import plainText from 'vite-plugin-plain-text';
 
 export default defineConfig({
   plugins: [plainText.default(/\.vert|\.frag$/)],
-  base: '',
 });