body { margin: 0; } #stage { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; pointer-events: none; overflow: hidden; } let width = window.innerWidth; height = window.innerHeight; let container = document.getElementById('stage'); let scene = new THREE.Scene(); let camera = new THREE.PerspectiveCamera(75, width / height, 1, 3000); camera.position.z = 600; let renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(width, height); container.appendChild(renderer.domElement); let colors = ['#FF004B', '#6437E6', '#00E6F0']; let particles = []; let mouse = new THREE.Vector2(); let raycaster = new THREE.Raycaster(); function createPerfectPixelShape() { let shape = new THREE.Shape(); shape.moveTo(-6, 9); shape.lineTo(6, 9); shape.lineTo(6, 6); shape.lineTo(9, 6); shape.lineTo(9, -6); shape.lineTo(6, -6); shape.lineTo(6, -9); shape.lineTo(-6, -9); shape.lineTo(-6, -6); shape.lineTo(-9, -6); shape.lineTo(-9, 6); shape.lineTo(-6, 6); shape.closePath(); return shape; } function createParticle() { let shapeGeometry = new THREE.ShapeGeometry(createPerfectPixelShape()); shapeGeometry.scale(0.6, 0.6, 0.6); let material = new THREE.MeshBasicMaterial({ color: colors[Math.floor(Math.random() * colors.length)], side: THREE.DoubleSide }); let particle = new THREE.Mesh(shapeGeometry, material); particle.position.set( (Math.random() - 0.5) * width, (Math.random() - 0.5) * height, 0 ); particle.userData.velocity = new THREE.Vector3( (Math.random() - 0.5) * 0.2, (Math.random() - 0.5) * 0.2, 0 ); particle.userData.originalColor = particle.material.color.getHex(); scene.add(particle); particles.push(particle); } for (let i = 0; i { p.position.x += p.userData.velocity.x; p.position.y += p.userData.velocity.y; if ( p.position.x > width / 2 || p.position.x height / 2 || p.position.y { if (p !== other) { let distance = p.position.distanceTo(other.position); if (distance p.material.color.setHex(p.userData.originalColor)); if (intersects.length > 0) { let object = intersects[0].object; object.userData.hoverColor = object.userData.hoverColor || Math.random() * 0xffffff; object.material.color.setHex(object.userData.hoverColor); } renderer.render(scene, camera); } function onMouseMove(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; } window.addEventListener('mousemove', onMouseMove); animate();