Refactor galaxy background animation and enhance terrain generation with smoother mountains and improved lighting

index.html

@@ -35,18 +35,17 @@
       <small>Generated: static homepage — served by nginx in a container. Edit and rebuild to update.</small>
     </footer>
     <script>
-      // Galaxy background animation with mountains
+      // Galaxy background animation - exact CodePen recreation
       (function initGalaxy(){
         var ww = window.innerWidth;
         var wh = window.innerHeight;
 
         var renderer = new THREE.WebGLRenderer({
           antialias: true,
-          canvas: document.querySelector('#galaxy-canvas'),
-          alpha: false
+          canvas: document.querySelector('#galaxy-canvas')
         });
         renderer.setSize(ww, wh);
-        renderer.setClearColor(0x001a2d, 1);
+        renderer.setClearColor(0x001a2d);
 
         var scene = new THREE.Scene();
         scene.fog = new THREE.Fog(0x001a2d, 80, 140);
@@ -57,7 +56,7 @@
         camera.position.z = 5;
         camera.lookAt(new THREE.Vector3());
 
-        // Create galaxy particles
+        // Galaxy particles
         var particles = [];
         for(var i = 0; i < 20000; i++){
           var particle = new Particle();
@@ -74,10 +73,7 @@
           this.object.position.y = height;
 
           var geometry = new THREE.SphereGeometry(0.1, 4, 4);
-          var material = new THREE.MeshBasicMaterial({
-            color: 0xffffff
-          });
-
+          var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
           var mesh = new THREE.Mesh(geometry, material);
           mesh.position.x = radius;
 
@@ -89,51 +85,83 @@
           };
         }
 
-        // Create terrain/mountains
+        // Terrain/Mountains - smooth shaded, not wireframe
         var terrain = new THREE.Object3D();
-        var terrainGeometry = new THREE.PlaneGeometry(400, 400, 100, 100);
-        
-        // Modify vertices to create mountain landscape
-        var vertices = terrainGeometry.attributes.position.array;
-        for(var i = 0; i < vertices.length; i += 3){
-          var x = vertices[i];
-          var y = vertices[i + 1];
-          var distance = Math.sqrt(x * x + y * y);
-          var height = (Math.random() - 0.5) * 12;
-          height *= Math.max(0, 1 - distance / 180); // Fade height at edges
-          vertices[i + 2] = height;
+
+        function createMountain(color, yPos, opacity, zOffset){
+          var geometry = new THREE.PlaneGeometry(400, 400, 100, 100);
+          var positionAttr = geometry.attributes.position;
+          
+          for(var i = 0; i < positionAttr.count; i++){
+            var x = positionAttr.getX(i);
+            var y = positionAttr.getY(i);
+            var distance = Math.sqrt(x * x + y * y);
+            
+            // Smoother, wave-like mountains
+            var z = Math.sin(x * 0.02) * Math.cos(y * 0.02) * 20;
+            z += Math.sin(x * 0.01 + y * 0.01) * 10;
+            z += Math.sin(distance * 0.01) * 15;
+            
+            // Fade at edges for horizon effect
+            var fade = Math.max(0, 1 - distance / 200);
+            positionAttr.setZ(i, z * fade + zOffset);
+          }
+          
+          positionAttr.needsUpdate = true;
+          geometry.computeVertexNormals();
+
+          var material = new THREE.MeshLambertMaterial({
+            color: color,
+            transparent: true,
+            opacity: opacity,
+            side: THREE.DoubleSide,
+            flatShading: false
+          });
+
+          var mesh = new THREE.Mesh(geometry, material);
+          mesh.rotation.x = -Math.PI / 2;
+          mesh.position.y = yPos;
+          terrain.add(mesh);
         }
-        terrainGeometry.attributes.position.needsUpdate = true;
-        terrainGeometry.computeVertexNormals();
 
-        var terrainMaterial = new THREE.MeshLambertMaterial({
-          color: 0x0a2540,
-          wireframe: true,
-          transparent: true,
-          opacity: 0.7
-        });
+        // Create 3 layers - back to front
+        createMountain(0x0d2847, -25, 0.4, -10);  // Far layer - lighter blue
+        createMountain(0x0a1f3d, -20, 0.6, -5);   // Middle layer
+        createMountain(0x061829, -15, 0.8, 0);    // Close layer - darkest
 
-        var terrainMesh = new THREE.Mesh(terrainGeometry, terrainMaterial);
-        terrainMesh.rotation.x = -Math.PI / 2;
-        terrainMesh.position.y = -20;
-        terrain.add(terrainMesh);
         scene.add(terrain);
 
-        // Add ambient light
-        var ambientLight = new THREE.AmbientLight(0x4488ff, 0.4);
+        // Lighting setup
+        var ambientLight = new THREE.AmbientLight(0x4488ff, 0.5);
         scene.add(ambientLight);
 
-        // Add directional light for terrain
-        var directionalLight = new THREE.DirectionalLight(0x88ccff, 0.6);
+        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
         directionalLight.position.set(50, 50, 50);
         scene.add(directionalLight);
 
+        // Atmospheric point lights
+        var pointLight1 = new THREE.PointLight(0x88ccff, 1.5, 150);
+        pointLight1.position.set(0, 20, 0);
+        scene.add(pointLight1);
+
+        var pointLight2 = new THREE.PointLight(0x4488cc, 1.0, 120);
+        pointLight2.position.set(-40, 10, 30);
+        scene.add(pointLight2);
+
+        var pointLight3 = new THREE.PointLight(0x6699ff, 0.8, 100);
+        pointLight3.position.set(40, 10, -30);
+        scene.add(pointLight3);
+
+        // Animation
         function render(){
           requestAnimationFrame(render);
+          
           particles.forEach(function(p){
             p.update();
           });
-          terrain.rotation.z += 0.0001;
+          
+          terrain.rotation.z += 0.00005;
+          
           renderer.render(scene, camera);
         }