diff options
Diffstat (limited to 'src/components/ThreeBackground.tsx')
| -rw-r--r-- | src/components/ThreeBackground.tsx | 72 |
1 files changed, 0 insertions, 72 deletions
diff --git a/src/components/ThreeBackground.tsx b/src/components/ThreeBackground.tsx deleted file mode 100644 index 1a6337c..0000000 --- a/src/components/ThreeBackground.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, { useEffect, useRef } from 'react'; -import * as THREE from 'three'; - -export const ThreeBackground: React.FC = () => { - const containerRef = useRef<HTMLDivElement>(null); - - useEffect(() => { - if (!containerRef.current) return; - - const scene = new THREE.Scene(); - const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); - const renderer = new THREE.WebGLRenderer({ alpha: true }); - - renderer.setSize(window.innerWidth, window.innerHeight); - containerRef.current.appendChild(renderer.domElement); - - // Create particles - const geometry = new THREE.BufferGeometry(); - const vertices = []; - - for (let i = 0; i < 5000; i++) { - vertices.push( - THREE.MathUtils.randFloatSpread(2000), // x - THREE.MathUtils.randFloatSpread(2000), // y - THREE.MathUtils.randFloatSpread(2000) // z - ); - } - - geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); - - const material = new THREE.PointsMaterial({ - color: 0x88ccff, - size: 2, - transparent: true, - opacity: 0.5 - }); - - const particles = new THREE.Points(geometry, material); - scene.add(particles); - - camera.position.z = 1000; - - const animate = () => { - requestAnimationFrame(animate); - particles.rotation.x += 0.0001; - particles.rotation.y += 0.0001; - renderer.render(scene, camera); - }; - - animate(); - - const handleResize = () => { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); - }; - - window.addEventListener('resize', handleResize); - - return () => { - window.removeEventListener('resize', handleResize); - containerRef.current?.removeChild(renderer.domElement); - }; - }, []); - - return ( - <div - ref={containerRef} - className="fixed top-0 left-0 w-full h-full z-0" - /> - ); -}; |
