From 5040da28e3561168ecd5c355091d707cf4115dee Mon Sep 17 00:00:00 2001 From: Natasha Moongrave Date: Sun, 22 Mar 2026 22:50:26 +0100 Subject: Moved the background JavaScript code from . to src/Background --- main.js | 82 --------------------------------------------- mountains.js | 40 ---------------------- src/Background/main.js | 82 +++++++++++++++++++++++++++++++++++++++++++++ src/Background/mountains.js | 40 ++++++++++++++++++++++ src/Background/sun.js | 29 ++++++++++++++++ sun.js | 29 ---------------- 6 files changed, 151 insertions(+), 151 deletions(-) delete mode 100644 main.js delete mode 100644 mountains.js create mode 100644 src/Background/main.js create mode 100644 src/Background/mountains.js create mode 100644 src/Background/sun.js delete mode 100644 sun.js diff --git a/main.js b/main.js deleted file mode 100644 index 2fc398b..0000000 --- a/main.js +++ /dev/null @@ -1,82 +0,0 @@ -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/mountains.js b/mountains.js deleted file mode 100644 index 27cea87..0000000 --- a/mountains.js +++ /dev/null @@ -1,40 +0,0 @@ -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/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 }; +} diff --git a/sun.js b/sun.js deleted file mode 100644 index 865cc09..0000000 --- a/sun.js +++ /dev/null @@ -1,29 +0,0 @@ -// 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 }; -} -- cgit v1.2.3