Add JavaScript modules for enhanced functionality and dynamic content loading

2025-11-24 01:32:16 -05:00
parent 7caeb56def
commit 3b09920eee
7 changed files with 485 additions and 457 deletions
--- a/js/galaxy-background.js
+++ b/js/galaxy-background.js
@@ -0,0 +1,149 @@
+// Galaxy background - moonlit terrain with floating stars
+(function initGalaxy(){
+  console.clear();
+
+  var ww = window.innerWidth,
+      wh = window.innerHeight;
+
+  var renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    canvas: document.querySelector('#galaxy-canvas')
+  });
+  renderer.setSize(ww, wh);
+  renderer.setClearColor(0x001a2d);
+
+  var scene = new THREE.Scene();
+  scene.fog = new THREE.Fog(0x001a2d, 80, 140);
+
+  var camera = new THREE.PerspectiveCamera(45, ww/wh, 0.1, 200);
+  camera.position.x = 70;
+  camera.position.y = 30;
+  camera.position.z = 5;
+  camera.lookAt(new THREE.Vector3());
+
+  /* LIGHTS */
+  var moonLight = new THREE.PointLight(0xffffff, 2, 150);
+  scene.add(moonLight);
+
+  var moon;
+  function createMoon() {
+    var geometry = new THREE.SphereGeometry(8, 32, 32);
+    var material = new THREE.MeshPhongMaterial({
+      color: 0x26fdd9,
+      shininess: 15,
+      emissive: 0x2bb2e6,
+      emissiveIntensity: 0.8
+    });
+    moon = new THREE.Mesh(geometry, material);
+    moon.position.x = -9;
+    moon.position.z = -6.5;
+    moon.position.y = 1;
+    moon.rotation.y = -1;
+    scene.add(moon);
+    moonLight.position.copy(moon.position);
+    moonLight.position.y += 4;
+    var moonLight2 = new THREE.PointLight(0xffffff, 0.6, 150);
+    scene.add(moonLight2);
+    moonLight2.position.x += 20;
+    moonLight2.position.y -= 20;
+    moonLight2.position.z -= 25;
+  }
+
+  // Initialize simplex noise
+  var noise = new SimplexNoise();
+
+  function createTerrain() {
+    var geometry = new THREE.PlaneGeometry(150, 150, 120, 120);
+    var m = new THREE.Matrix4();
+    m.makeRotationX(Math.PI * -0.5);
+    geometry.applyMatrix4(m);
+    
+    var positions = geometry.attributes.position;
+    for(var i = 0; i < positions.count; i++) {
+      var x = positions.getX(i);
+      var z = positions.getZ(i);
+      var ratio = noise.noise3D(x * 0.03, z * 0.03, 0);
+      positions.setY(i, ratio * 10);
+    }
+    positions.needsUpdate = true;
+    geometry.computeVertexNormals();
+    
+    var material = new THREE.MeshPhongMaterial({
+      color: 0x198257,
+      emissive: 0x032f50
+    });
+    var plane = new THREE.Mesh(geometry, material);
+    scene.add(plane);
+  }
+
+  var stars = new THREE.Group();
+  scene.add(stars);
+  var starsLights = new THREE.Group();
+  scene.add(starsLights);
+  var starsAmount = 20;
+  
+  function createStars() {
+    var geometry = new THREE.SphereGeometry(0.3, 16, 16);
+    var material = new THREE.MeshBasicMaterial({color: 0xffffff});
+    for(var i = 0; i < starsAmount; i++) {
+      var star = new THREE.Mesh(geometry, material);
+      star.position.x = (Math.random() - 0.5) * 150;
+      star.position.z = (Math.random() - 0.5) * 150;
+      var ratio = noise.noise3D(star.position.x * 0.03, star.position.z * 0.03, 0);
+      star.position.y = ratio * 10 + 0.3;
+      stars.add(star);
+      var velX = (Math.random() + 0.1) * 0.1 * (Math.random() < 0.5 ? -1 : 1);
+      var velY = (Math.random() + 0.1) * 0.1 * (Math.random() < 0.5 ? -1 : 1);
+      star.vel = new THREE.Vector2(velX, velY);
+      var starLight = new THREE.PointLight(0xffffff, 0.8, 3);
+      starLight.position.copy(star.position);
+      starLight.position.y += 0.5;
+      starsLights.add(starLight);
+    }
+  }
+
+  function updateStar(star, index) {
+    if(star.position.x < -75) {
+      star.position.x = 75;
+    }
+    if(star.position.x > 75) {
+      star.position.x = -75;
+    }
+    if(star.position.z < -75) {
+      star.position.z = 75;
+    }
+    if(star.position.z > 75) {
+      star.position.z = -75;
+    }
+
+    star.position.x += star.vel.x;
+    star.position.z += star.vel.y;
+    var ratio = noise.noise3D(star.position.x * 0.03, star.position.z * 0.03, 0);
+    star.position.y = ratio * 10 + 0.3;
+
+    starsLights.children[index].position.copy(star.position);
+    starsLights.children[index].position.y += 0.5;
+  }
+
+  function render(a) {
+    requestAnimationFrame(render);
+    for(var i = 0; i < starsAmount; i++) {
+      updateStar(stars.children[i], i);
+    }
+    renderer.render(scene, camera);
+  }
+
+  function onResize() {
+    ww = window.innerWidth;
+    wh = window.innerHeight;
+    camera.aspect = ww / wh;
+    camera.updateProjectionMatrix();
+    renderer.setSize(ww, wh);
+  }
+
+  createMoon();
+  createTerrain();
+  createStars();
+  requestAnimationFrame(render);
+  window.addEventListener('resize', onResize);
+})();