Moved the background JavaScript code from . to src/Background

1 files changed, 40 insertions, 0 deletions

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;
+}