Python与HTML+JavaScript实现3D粒子爱心动画：代码剖析与开发要点

你提供的是Python代码，若要将其功能用HTML和JavaScript来实现，下面是一个示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Particle Heart</title> <style> body { margin: 0; background-color: black; display: flex; justify-content: center; align-items: center; height: 100vh; } #scene-container { width: 800px; height: 600px; } </style> </head> <body> <div id="scene-container"></div> <script type="module"> import * as THREE from 'https://unpkg.com/three@0.138.3/build/three.module.js'; import { OrbitControls } from 'https://unpkg.com/three@0.138.3/examples/jsm/controls/OrbitControls.js'; // 创建场景 const scene = new THREE.Scene(); scene.background = new THREE.Color('black'); // 创建相机 const camera = new THREE.PerspectiveCamera(75, 800 / 600, 0.1, 1000); camera.position.z = 30; // 创建渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(800, 600); const container = document.getElementById('scene-container'); container.appendChild(renderer.domElement); // 爱心参数方程 function heart(t) { const x = 16 * Math.pow(Math.sin(t), 3); const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t); return [x, y]; } // 生成爱心形状的点 const numPoints = 1000; const points = []; for (let i = 0; i < numPoints; i++) { const t = (i / numPoints) * 2 * Math.PI; const [x, y] = heart(t); const z = THREE.MathUtils.mapLinear(i, 0, numPoints, -5, 5); points.push(new THREE.Vector3(x, y, z)); } // 创建粒子 const numParticles = 500; const particlesGeometry = new THREE.BufferGeometry(); const positions = new Float32Array(numParticles * 3); const colors = new Float32Array(numParticles * 3); for (let i = 0; i < numParticles; i++) { const idx = Math.floor(Math.random() * numPoints); const point = points[idx]; positions[i * 3] = point.x; positions[i * 3 + 1] = point.y; positions[i * 3 + 2] = point.z; colors[i * 3] = Math.random(); colors[i * 3 + 1] = Math.random(); colors[i * 3 + 2] = Math.random(); } particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const particlesMaterial = new THREE.PointsMaterial({ size: 0.2, vertexColors: true, transparent: true, opacity: 0.8 }); const particles = new THREE.Points(particlesGeometry, particlesMaterial); scene.add(particles); // 添加轨道控制器 const controls = new OrbitControls(camera, renderer.domElement); // 更新函数用于动画 function update() { const positions = particles.geometry.attributes.position.array; for (let i = 0; i < numParticles; i++) { positions[i * 3] += (Math.random() - 0.5) * 0.3; positions[i * 3 + 1] += (Math.random() - 0.5) * 0.3; positions[i * 3 + 2] += (Math.random() - 0.5) * 0.3; const dist = Math.sqrt( positions[i * 3] * positions[i * 3] + positions[i * 3 + 1] * positions[i * 3 + 1] + positions[i * 3 + 2] * positions[i * 3 + 2] ); if (dist > 20) { const idx = Math.floor(Math.random() * numPoints); const point = points[idx]; positions[i * 3] = point.x; positions[i * 3 + 1] = point.y; positions[i * 3 + 2] = point.z; } } particles.geometry.attributes.position.needsUpdate = true; } // 动画循环 function animate() { requestAnimationFrame(animate); update(); renderer.render(scene, camera); } animate(); </script> </body> </html> ``` 代码 1. 引入Three.js库和轨道控制器，用于创建3D场景和控制相机视角。 2. 创建场景、相机和渲染器，设置场景为黑色。 3. 定义爱心参数方程，生成爱心形状的点。 4. 创建粒子系统，随机初始化粒子位置和颜色。 5. 在`update`函数中更新粒子位置，若粒子离爱心太远则重置到爱心上。 6. 通过`requestAnimationFrame`实现动画循环。我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 库的引入路径：确保Three.js库和相关模块的引入路径正确，避免因路径问题导致代码无法正常运行。 2. 坐标系统：Three.js有自己的坐标系统，在处理粒子位置和运动时，要确保对坐标系统有清晰的理解。 3. 性能优化：粒子数量过多可能会导致性能问题，要根据实际情况合理调整粒子数量。 ######[AI写代码神器 | 1487点数解答 | 2025-08-07 11:24:56]

服务商

更多选项

快捷项

自定义