超全攻略：Canvas、CSS、Three.js实现星空粒子效果及性能优化

# 星空粒子效果实现 星空粒子效果通常用于创建动态或视觉效果，可以通过多种技术实现。以下是几种常见的实现方式： ## 1. 使用Canvas实现 ```javascript // 创建星空粒子效果 const canvas = document.getElementById('starCanvas'); const ctx = canvas.getContext('2d'); // 设置canvas尺寸为窗口大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 创建星星数组 const stars = []; const starCount = 200; // 初始化星星 for (let i = 0; i < starCount; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random() * 1.5, vx: Math.floor(Math.random() * 50) - 25, vy: Math.floor(Math.random() * 50) - 25 }); } // 动画循环 function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'white'; stars.forEach(star => { ctx.beginPath(); ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2); ctx.fill(); // 更新位置 star.x += star.vx / 60; star.y += star.vy / 60; // 边界检查 if (star.x < 0 || star.x > canvas.width) star.vx = -star.vx; if (star.y < 0 || star.y > canvas.height) star.vy = -star.vy; }); requestAnimationFrame(animate); } animate(); // 窗口大小改变时重置canvas尺寸 window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); ``` ## 2. 使用CSS实现简单星空 ```html <style> .starry-sky { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #000000 0%, #1a1a2e 100%); overflow: hidden; z-index: -1; } .star { position: absolute; background-color: white; border-radius: 50%; animation: twinkle var(--duration) infinite ease-in-out; } @keyframes twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } } </style> <script> document.addEventListener('DOMContentLoaded', () => { const sky = document.querySelector('.starry-sky'); const starCount = 100; for (let i = 0; i < starCount; i++) { const star = document.createElement('div'); star.classList.add('star'); // 随机大小 const size = Math.random() * 3; star.style.width = `${size}px`; star.style.height = `${size}px`; // 随机位置 star.style.left = `${Math.random() * 100}%`; star.style.top = `${Math.random() * 100}%`; // 随机动画持续时间 star.style.setProperty('--duration', `${2 + Math.random() * 3}s`); sky.appendChild(star); } }); </script> ``` ## 3. 使用Three.js实现3D星空 ```javascript import * as THREE from 'three'; // 初始化场景、相机和渲染器 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建星空几何体 const starGeometry = new THREE.BufferGeometry(); const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.1, transparent: true, opacity: 0.8 }); // 生成星星顶点 const starVertices = []; for (let i = 0; i < 10000; i++) { const x = (Math.random() - 0.5) * 2000; const y = (Math.random() - 0.5) * 2000; const z = (Math.random() - 0.5) * 2000; starVertices.push(x, y, z); } starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3)); const stars = new THREE.Points(starGeometry, starMaterial); scene.add(stars); // 设置相机位置 camera.position.z = 5; // 动画循环 function animate() { requestAnimationFrame(animate); // 旋转星空 stars.rotation.x += 0.0005; stars.rotation.y += 0.0005; renderer.render(scene, camera); } animate(); // 响应窗口大小变化 window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); ``` ## 性能优化建议 1. 对于Canvas实现，考虑使用离屏canvas进行预渲染 2. 减少粒子数量并使用更高效的渲染方式 3. 对于不需要交互的静态星空，可以使用CSS实现以获得更好的性能 ## 注意事项 1. 粒子数量过多会影响性能，需要根据设备性能调整 2. 移动设备上可能需要减少粒子数量或简化效果 3. 考虑添加视差效果增强深度感 ######[AI写代码神器 | 1270点数解答 | 2025-07-09 00:12:29]