108 lines
3.3 KiB
JavaScript
108 lines
3.3 KiB
JavaScript
// Background animation with Three.js
|
|
let scene, camera, renderer, stars = [];
|
|
|
|
function initBackground() {
|
|
// Setup scene
|
|
scene = new THREE.Scene();
|
|
|
|
// Setup camera
|
|
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
|
|
camera.position.z = 100;
|
|
|
|
// Setup renderer
|
|
renderer = new THREE.WebGLRenderer({ alpha: true });
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
renderer.setClearColor(0x000000, 0); // Transparent background
|
|
|
|
// Append renderer to DOM
|
|
const backgroundContainer = document.getElementById('background-container');
|
|
if (backgroundContainer) {
|
|
backgroundContainer.appendChild(renderer.domElement);
|
|
}
|
|
|
|
// Add stars
|
|
for (let i = 0; i < 1000; i++) {
|
|
const geometry = new THREE.SphereGeometry(0.2, 8, 8);
|
|
const material = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: Math.random() * 0.5 + 0.1 });
|
|
const star = new THREE.Mesh(geometry, material);
|
|
|
|
// Random position
|
|
star.position.x = Math.random() * 600 - 300;
|
|
star.position.y = Math.random() * 600 - 300;
|
|
star.position.z = Math.random() * 600 - 300;
|
|
|
|
// Store reference to move in animation
|
|
star.velocity = Math.random() * 0.02 + 0.005;
|
|
stars.push(star);
|
|
|
|
scene.add(star);
|
|
}
|
|
|
|
// Add large glowing particles
|
|
for (let i = 0; i < 15; i++) {
|
|
const size = Math.random() * 5 + 2;
|
|
const geometry = new THREE.SphereGeometry(size, 16, 16);
|
|
|
|
// Create a glowing material
|
|
const color = new THREE.Color();
|
|
color.setHSL(Math.random(), 0.7, 0.5); // Random hue
|
|
|
|
const material = new THREE.MeshBasicMaterial({
|
|
color: color,
|
|
transparent: true,
|
|
opacity: 0.2
|
|
});
|
|
|
|
const particle = new THREE.Mesh(geometry, material);
|
|
|
|
// Random position but further away
|
|
particle.position.x = Math.random() * 1000 - 500;
|
|
particle.position.y = Math.random() * 1000 - 500;
|
|
particle.position.z = Math.random() * 200 - 400;
|
|
|
|
// Store reference to move in animation
|
|
particle.velocity = Math.random() * 0.01 + 0.002;
|
|
stars.push(particle);
|
|
|
|
scene.add(particle);
|
|
}
|
|
|
|
// Handle window resize
|
|
window.addEventListener('resize', onWindowResize);
|
|
|
|
// Start animation
|
|
animate();
|
|
}
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
|
|
// Move stars
|
|
stars.forEach(star => {
|
|
star.position.z += star.velocity;
|
|
|
|
// Reset position if star moves too close
|
|
if (star.position.z > 100) {
|
|
star.position.z = -300;
|
|
}
|
|
});
|
|
|
|
// Rotate the entire scene slightly for a dreamy effect
|
|
scene.rotation.y += 0.0003;
|
|
scene.rotation.x += 0.0001;
|
|
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
function onWindowResize() {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
}
|
|
|
|
// Initialize background when the DOM is loaded
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initBackground);
|
|
} else {
|
|
initBackground();
|
|
}
|