```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; }

代码问题分析你提供的代码整体思路是使用 Three.js 创建一个 3D 粒子爱心动画，但代码存在一些问题和可以优化的地方： 1. 代码未完整结束：`update` 函数里 `positions[i * 3 + 1] = point.y;` 之后的代码不完整，应该是遗漏了 `positions[i * 3 + 2] = point.z;` 以及 `particles.geometry.attributes.position.needsUpdate = true;` 这一行，用于通知 Three.js 更新粒子的位置。 2. 性能问题：粒子数量设置为 `50000` 可能会导致性能下降，特别是在性能较弱的设备上。 3. 随机运动逻辑：粒子的随机运动逻辑可能会导致粒子分布不均匀，看起来不自然。优化后的代码 ```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 = 10000; // 适当减少粒子数量以提高性能 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.1; // 减小随机运动的步长 positions[i * 3 + 1] += (Math.random() - 0.5) * 0.1; positions[i * 3 + 2] += (Math.random() - 0.5) * 0.1; 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. 补全代码：在 `update` 函数里补全了粒子位置重置的代码，并添加了 `particles.geometry.attributes.position.needsUpdate = true;`。 2. 减少粒子数量：将粒子数量从 `50000` 减少到 `10000`，以提高性能。 3. 减小随机运动步长：将随机运动的步长从 `0.3` 减小到 `0.1`，使粒子运动更自然。需要小心处理的地方我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 库版本兼容性：确保引入的 Three.js 库版本与代码兼容，不同版本的 API 可能会有所不同。 2. 内存管理：大量的粒子会占用较多内存，要注意避免内存泄漏，特别是在动态创建和销毁对象时。 3. 性能测试：在不同性能的设备上进行测试，根据实际情况调整粒子数量和运动逻辑，以保证动画的流畅性。 [2025-08-07 11:27:10 | AI写代码神器 | 1694点数解答]

服务商

更多选项

快捷项

直通车