超炫3D动态爱心粒子代码揭秘：开发中需小心处理的三大要点

# 3D动态爱心粒子效果 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D爱心粒子</title> <style> body { margin: 0; overflow: hidden; background: #000; } canvas { display: block; } </style> </head> <body> <canvas id="heartCanvas"></canvas> <script> const canvas = document.getElementById('heartCanvas'); const ctx = canvas.getContext('2d'); // 设置canvas尺寸为窗口大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 粒子数组 let particles = []; const particleCount = 1500; // 粒子数量 // 鼠标位置 let mouseX = 0; let mouseY = 0; // 爱心参数方程 function heartShape(t) { const scale = 10; const x = 16 * Math.pow(Math.sin(t), 3) * scale; const y = -(13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t)) * scale; return { x, y }; } // 粒子类 class Particle { constructor() { this.reset(); this.z = Math.random() * 400 - 200; // z坐标 } reset() { this.t = Math.random() * Math.PI * 2; // 参数t const heart = heartShape(this.t); this.x = heart.x; this.y = heart.y; this.size = Math.random() * 2 + 1; this.speed = 0.002 + Math.random() * 0.002; this.color = `hsl(${Math.random() * 60 + 300}, 100%, 50%)`; // 粉色系 this.alpha = 0.8 + Math.random() * 0.2; } update() { this.t += this.speed; if (this.t > Math.PI * 2) this.t = 0; const heart = heartShape(this.t); this.targetX = heart.x; this.targetY = heart.y; // 平滑移动到目标位置 this.x += (this.targetX - this.x) * 0.05; this.y += (this.targetY - this.y) * 0.05; // 3D旋转效果 const rotation = Date.now() * 0.001; const cos = Math.cos(rotation); const sin = Math.sin(rotation); // 应用3D变换 const x3d = this.x * cos - this.z * sin; const z3d = this.x * sin + this.z * cos; // 透视投影 const scale = 500 / (500 + z3d); this.screenX = x3d * scale + canvas.width / 2; this.screenY = this.y * scale + canvas.height / 2; this.screenSize = this.size * scale; } draw() { ctx.save(); ctx.globalAlpha = this.alpha; ctx.fillStyle = this.color; // 绘制粒子 ctx.beginPath(); ctx.arc(this.screenX, this.screenY, this.screenSize, 0, Math.PI * 2); ctx.fill(); // 鼠标交互效果 const dx = this.screenX - mouseX; const dy = this.screenY - mouseY; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < 100) { ctx.beginPath(); ctx.strokeStyle = this.color; ctx.globalAlpha = (100 - distance) / 100 * 0.5; ctx.lineWidth = 1; ctx.moveTo(this.screenX, this.screenY); ctx.lineTo(mouseX, mouseY); ctx.stroke(); } ctx.restore(); } } // 初始化粒子 function initParticles() { particles = []; for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } } // 动画循环 function animate() { // 清除画布 ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 更新和绘制所有粒子 particles.forEach(particle => { particle.update(); particle.draw(); }); requestAnimationFrame(animate); } // 鼠标移动事件 canvas.addEventListener('mousemove', (e) => { mouseX = e.clientX; mouseY = e.clientY; }); // 窗口大小改变事件 window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); // 启动动画 initParticles(); animate(); </script> </body> </html> ``` 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 粒子数量过多会导致性能下降，需要根据设备性能调整粒子数量 2. 3D变换计算中的三角函数运算可能消耗较多计算资源 3. 透视投影的参数设置不当会导致3D效果失真 ######[AI写代码神器 | 1253点数解答 | 2025-11-05 14:26:43]

服务商

更多选项

快捷项

自定义