Moved the background JavaScript code from . to src/Background

3 files changed, 151 insertions, 0 deletions

diff --git a/src/Background/main.js b/src/Background/main.js
new file mode 100644
index 0000000..2fc398b
--- /dev/null
+++ b/src/Background/main.js
@@ -0,0 +1,82 @@
+import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
+import { createSun } from './sun.js';
+import { createMountains } from './mountains.js';
+
+// Scene setup
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x090012);
+scene.fog = new THREE.Fog(0x090012, 20, 120);
+
+const camera = new THREE.PerspectiveCamera(
+  60,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  500
+);
+camera.position.set(0, 2, 15);
+camera.rotation.x = -0.1;
+
+const renderer = new THREE.WebGLRenderer({
+  canvas: document.getElementById('bg'),
+  antialias: true
+});
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
+
+// Grid
+const size = 200;
+const divisions = 200;
+const grid = new THREE.GridHelper(size, divisions, 0xff00ff, 0xff00ff);
+grid.material.transparent = true;
+grid.material.opacity = 0.4;
+scene.add(grid);
+
+// --- Occlusion floor (invisible) ---
+const floorGeometry = new THREE.PlaneGeometry(size, size);
+const floorMaterial = new THREE.MeshBasicMaterial({
+    color: 0x090012,   // matches background
+    opacity: 0.5,        // invisible
+    transparent: true
+});
+const floor = new THREE.Mesh(floorGeometry, floorMaterial);
+floor.rotation.x = -Math.PI / 2; // horizontal
+floor.position.y = 0;             // same height as grid
+scene.add(floor);
+
+// Sun
+const { sun, glow } = createSun();
+scene.add(sun);
+scene.add(glow);
+
+let scroll = 0;
+let sunAngle = 0;
+
+// Mountains
+const mountains = createMountains();
+scene.add(mountains);
+
+// Animation function
+function animate() {
+  scroll += 0.05;
+  grid.position.z = scroll % 10;
+
+  renderer.render(scene, camera);
+}
+
+// Start loop with pause/resume on tab visibility
+renderer.setAnimationLoop(animate);
+
+document.addEventListener('visibilitychange', () => {
+  if (document.hidden) {
+    renderer.setAnimationLoop(null);
+  } else {
+    renderer.setAnimationLoop(animate);
+  }
+});
+
+// Handle window resize
+window.addEventListener('resize', () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+});
diff --git a/src/Background/mountains.js b/src/Background/mountains.js
new file mode 100644
index 0000000..27cea87
--- /dev/null
+++ b/src/Background/mountains.js
@@ -0,0 +1,40 @@
+import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
+
+export function createMountains() {
+    const mountainCount = 100;     // number of peaks
+    const mountainWidth = 2;       // horizontal spacing
+    const mountainHeight = 5;      // max height of peaks
+    const baseHeight = 0;          // ground level
+    const mountainDepth = -50;     // far behind grid
+
+    // Create a 2D shape for the mountain silhouette
+    const shape = new THREE.Shape();
+    shape.moveTo(-mountainCount * mountainWidth / 2, baseHeight);
+
+    for (let i = -mountainCount / 2; i <= mountainCount / 2; i++) {
+        const x = i * mountainWidth;
+        const y = Math.random() * mountainHeight + 5; // peak height
+        shape.lineTo(x, y);
+    }
+
+    // Close shape at the far right base
+    shape.lineTo(mountainCount * mountainWidth / 2, baseHeight);
+    shape.lineTo(-mountainCount * mountainWidth / 2, baseHeight);
+
+    // Convert shape to geometry
+    const geometry = new THREE.ShapeGeometry(shape);
+
+    // Rotate so it lies in XZ plane
+    // geometry.rotateX(-Math.PI / 2);
+    geometry.translate(0, 0, mountainDepth);
+
+    const material = new THREE.MeshBasicMaterial({
+        color: 0xff0077,
+        side: THREE.DoubleSide,
+        transparent: true,
+        opacity: 1
+    });
+
+    const mesh = new THREE.Mesh(geometry, material);
+    return mesh;
+}
diff --git a/src/Background/sun.js b/src/Background/sun.js
new file mode 100644
index 0000000..865cc09
--- /dev/null
+++ b/src/Background/sun.js
@@ -0,0 +1,29 @@
+// sun.js
+import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
+
+export function createSun() {
+    const sunRadius = 15;
+    const sunSegments = 64;
+
+    // Main sun mesh
+    const sunGeometry = new THREE.CircleGeometry(sunRadius, sunSegments);
+    const sunMaterial = new THREE.MeshBasicMaterial({
+        color: 0xf49922,    // neon pink
+        transparent: false,
+        opacity: 1
+    });
+    const sun = new THREE.Mesh(sunGeometry, sunMaterial);
+    sun.position.set(0, 5, -51);
+
+    // Optional glow halo
+    const glowGeometry = new THREE.CircleGeometry(sunRadius * 1.4, sunSegments);
+    const glowMaterial = new THREE.MeshBasicMaterial({
+        color: 0xf49922,
+        transparent: true,
+        opacity: 0.1
+    });
+    const glow = new THREE.Mesh(glowGeometry, glowMaterial);
+    glow.position.copy(sun.position);
+
+    return { sun, glow };
+}