[+] Adding atmosphere

warioddly · Dec 5, 2023 · 8c21528 · 8c21528
1 parent bd22146
commit 8c21528
Show file tree

Hide file tree

Showing 13 changed files with 51 additions and 48 deletions.
diff --git a/src/assets/images/8081_earthbump10k.jpg b/src/assets/images/8081_earthbump10k.jpg
diff --git a/src/assets/images/8081_earthspec10k.jpg b/src/assets/images/8081_earthspec10k.jpg
diff --git a/src/assets/images/earth_nightmap.jpg → src/assets/images/8k_earth_nightmap.jpg b/src/assets/images/earth_nightmap.jpg → src/assets/images/8k_earth_nightmap.jpg
diff --git a/src/assets/images/8k_stars_milky_way.jpg b/src/assets/images/8k_stars_milky_way.jpg
diff --git a/src/assets/images/earth_lightmap.jpg b/src/assets/images/earth_lightmap.jpg
diff --git a/src/assets/images/elev_bump_8k.jpg b/src/assets/images/elev_bump_8k.jpg
diff --git a/src/assets/images/glow.png b/src/assets/images/glow.png
diff --git a/src/assets/images/space.jpg b/src/assets/images/space.jpg
diff --git a/src/assets/images/storm_clouds_8k.jpg b/src/assets/images/storm_clouds_8k.jpg
diff --git a/src/assets/images/water_8k.png b/src/assets/images/water_8k.png
diff --git a/src/earth.ts b/src/earth.ts
@@ -9,25 +9,29 @@ export class Earth {
 
     constructor(scene: THREE.Scene, camera: THREE.PerspectiveCamera) {
 
-        const cloudTexture = new THREE.TextureLoader().load( require('./assets/images/8k_earth_clouds.jpg') ),
-              earthTexture = new THREE.TextureLoader().load( require('./assets/images/8k_earth_daymap.jpg') ),
-              bumpTexture  = new THREE.TextureLoader().load( require('./assets/images/elev_bump_8k.jpg')    );
+        const cloudTexture = new THREE.TextureLoader().load( require('./assets/images/8k_earth_clouds.jpg')  ),
+              earthDayTexture = new THREE.TextureLoader().load( require('./assets/images/8k_earth_daymap.jpg') ),
+              earthNightTexture = new THREE.TextureLoader().load( require('./assets/images/8k_earth_nightmap.jpg') ),
+              bumpTexture  = new THREE.TextureLoader().load( require('./assets/images/8081_earthbump10k.jpg')),
+              earthSpecTexture = new THREE.TextureLoader().load( require('./assets/images/8081_earthspec10k.jpg'));
 
         const earthMaterial = new THREE.MeshPhongMaterial({
-            map: earthTexture,
             bumpMap: bumpTexture,
             bumpScale: 0.001,
-            color: 0xffffff,
-            shininess: 10,
-            specular: 0x808080,
+            map: earthDayTexture,
+            emissiveMap: earthNightTexture,
+            emissive: new THREE.Color(0x888888),
+            emissiveIntensity: 1,
+            specularMap: earthSpecTexture,
+            specular: 1,
+            shininess: 30,
         });
         const cloudsMaterial = new THREE.MeshPhongMaterial({
             map: cloudTexture,
             alphaMap : cloudTexture,
             transparent: true,
-            alphaTest: 0.001,
+            alphaTest: 0.0001,
             side: THREE.DoubleSide,
-            opacity: 1
         });
         const atmosphereMaterial = new THREE.ShaderMaterial({
             uniforms:
@@ -48,11 +52,9 @@ export class Earth {
         this.clouds = new THREE.Mesh( new THREE.SphereGeometry( 0.505, 60, 60 ), cloudsMaterial );
         this.atmosphere = new THREE.Mesh(new THREE.SphereGeometry( 0.511, 60, 60 ), atmosphereMaterial);
 
-
         scene.add( this.earth );
-        scene.add( this.clouds);
-        scene.add( this.atmosphere);
-
+        scene.add( this.clouds );
+        scene.add( this.atmosphere );
 
     }
 

diff --git a/src/main.ts b/src/main.ts
@@ -23,7 +23,7 @@ class Engine {
         this._scene.background = new THREE.Color().setHSL( 0.51, 0.4, 0.01, THREE.SRGBColorSpace );
 
         this._camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.01, 100 );
-        this._camera.position.z = 40;
+        // this._camera.position.z = 40;
 
         this._renderer = new THREE.WebGLRenderer( { antialias: true, } );
         this._renderer.setPixelRatio( window.devicePixelRatio );
@@ -36,10 +36,13 @@ class Engine {
         this._controls.minDistance = 0.550;
         this._controls.maxDistance = 2;
 
-        this._scene.add( new THREE.AmbientLight( 0xFFFFFF ) );
+        const plight = new THREE.PointLight(0xffffff, 1);
+        plight.position.set(1, 1, 1);
+        this._scene.add(plight);
+
         this._scene.add(new Space());
         this._earth = new Earth(this._scene, this._camera);
-        this._sun = new Sun(this._scene, this._camera);
+        this._sun = new Sun(this._scene);
 
         // this._scene.position.set(0, -1, -1);
 

diff --git a/src/sun.ts b/src/sun.ts
@@ -7,7 +7,7 @@ export class Sun {
 
     public readonly sun : THREE.Mesh;
 
-    constructor(scene: THREE.Scene, camera: THREE.PerspectiveCamera) {
+    constructor(scene: THREE.Scene) {
 
         const geometry: THREE.SphereGeometry = new THREE.SphereGeometry(0.5, 50, 50);
 
@@ -22,49 +22,47 @@ export class Sun {
         this.sun.position.set(1, 1, 1);
         this.sun.matrixAutoUpdate = false;
         this.sun.updateMatrix();
-        scene.add(this.sun);
-
-        // const textureLoader = new THREE.TextureLoader();
-        //
-        // const hexangle = textureLoader.load( require('./assets/images/lensflare/hexangle.png') );
-        // const textureFlare0_alpha = textureLoader.load( require('./assets/images/lensflare/lensflare0_alpha.png') );
-        // const textureFlare0 = textureLoader.load( require('./assets/images/lensflare/lensflare0.png') );
-        // const textureFlare1 = textureLoader.load( require('./assets/images/lensflare/lensflare1.png') );
-        // const textureFlare2 = textureLoader.load( require('./assets/images/lensflare/lensflare2.png') );
-        // const textureFlare3 = textureLoader.load( require('./assets/images/lensflare/lensflare3.png') );
-        //
-        // const sunPosition = this.sun.position.clone();
-        //
-        // for (let i = 0; i < 20; i++) {
-        //
-        //     const lensflare = this.addLensFlare(sunPosition, 16000, hexangle, textureFlare2, textureFlare0);
-        //
-        //     this.sun.add( lensflare );
-        //
-        // }
+        // scene.add(this.sun);
 
 
-    }
+        const textureLoader = new THREE.TextureLoader();
+
+        const textureFlare0 = textureLoader.load( require("./assets/images/lensflare/lensflare0.png") );
+        const textureFlare1 = textureLoader.load( require("./assets/images/lensflare/lensflare2.png") );
+        const textureFlare2 = textureLoader.load( require("./assets/images/lensflare/lensflare3.png") );
 
+        for (let i = 0; i < 10; i++) {
+            scene.add( this.addLensFlare(
+                new THREE.Vector3(1, 1, 1),
+                120.5,
+                )
+            );
+        }
 
-    private addLensFlare(position, size, overrideImage, textureFlare1, textureFlare2) {
+    }
 
-        const flareColor = new THREE.Color( 0xffffff );
 
-        const lensFlare = new Lensflare( overrideImage, 2700, 0.0, THREE.AdditiveBlending, flareColor );
+    private addLensFlare(position, size) {
 
-        lensFlare.add( textureFlare1, 4096, 0.0, THREE.AdditiveBlending );
-        lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending );
-        lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending );
-        lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending );
+        const textureLoader = new THREE.TextureLoader();
 
-        // lensFlare.customUpdateCallback = lensFlareUpdateCallback;
+        const textureFlare0 = textureLoader.load( require("./assets/images/lensflare/lensflare0.png") );
+        const textureFlare3 = textureLoader.load( require("./assets/images/lensflare/lensflare3.png") );
+        const textureFlare2 = textureLoader.load( require("./assets/images/lensflare/lensflare2.png") );
+        const textureFlare1 = textureLoader.load( require("./assets/images/lensflare/lensflare1.png") );
+
+        const lensFlare = new Lensflare();
+        lensFlare.addElement( new LensflareElement( textureFlare0, size, 0.1, new THREE.Color( 0xffffff ) ) );
+        lensFlare.addElement( new LensflareElement( textureFlare3, size, .3 ) );
+        lensFlare.addElement( new LensflareElement( textureFlare2, size, 0.5 ) );
+        lensFlare.addElement( new LensflareElement( textureFlare1, size, 0.7 ) );
+        lensFlare.addElement( new LensflareElement( textureFlare2, size, 1 ) );
 
         lensFlare.position.copy( position );
-        lensFlare.size = size ? size : 16000 ;
 
         return lensFlare;
     }
 
 
-}
+}
+