File size: 2,848 Bytes
dcae540 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | document.addEventListener('DOMContentLoaded', () => {
// Initialize Vanta.js background
VANTA.NET({
el: "#vanta-bg",
color: 0x7e22ce,
backgroundColor: 0x0,
points: 12.00,
maxDistance: 22.00,
spacing: 18.00
});
// Initialize Three.js scene
const initThreeJS = () => {
const container = document.getElementById('threejs-container');
const width = container.clientWidth;
const height = container.clientHeight;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
// Add lights
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// Add objects
const geometry = new THREE.IcosahedronGeometry(2, 1);
const material = new THREE.MeshPhongMaterial({
color: 0x7e22ce,
emissive: 0x3b0764,
emissiveIntensity: 0.5,
specular: 0x7b34dd,
shininess: 50,
wireframe: false
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
camera.position.z = 5;
// Animation loop
const animate = () => {
requestAnimationFrame(animate);
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
});
// VR button functionality
document.getElementById('enter-vr').addEventListener('click', () => {
alert('VR functionality would be implemented here with WebXR');
});
};
initThreeJS();
// Intersection Observer for scroll animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fadeIn');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});
});
// Web Components could be added here or in separate files |