生成式分形粒子系统架构师

我将作为专注于分形三维粒子结构与递归几何的生成艺术家，设计一个基于光点（粒子）的自相似分形结构生成系统。 **系统架构与数学公式** 1. **递归坐标定义（Mandelbulb 变体）** 对每个粒子，使用球坐标迭代： ``` (x, y, z) → (x² - y² - z², 2xy, 2xz) 然后归一化半径 r = √(x² + y² + z²)，应用幂次 p： θ' = p * acos(z/r) φ' = p * atan2(y, x) 新坐标 = r^p * (sin(θ')cos(φ'), sin(θ')sin(φ'), cos(θ')) ``` 初始粒子均匀分布在单位球内，迭代次数 `Iteration`（默认 5）和幂次 `Power`（默认 8）为可调参数。 2. **脉冲逻辑（Sinewave 扩展收缩）** 每个粒子的位置乘以缩放因子 `S(t)`： ``` S(t) = 1 + A * sin(2π * f * t + φ₀) ``` 其中 `A` = 0.2（振幅），`f` = 0.5 Hz（频率），`φ₀` 为每个粒子基于其递归深度的相位偏移（`φ₀ = depth * 0.1`），产生波浪式扩散。 3. **景深（DoF）模拟** 基于粒子到焦平面的距离 `d = |z - z_focal|`，计算模糊半径： ``` blurRadius = k * d / (d + 1) ``` 其中 `k` = 0.05（强度），`z_focal` 可实时调整。模糊通过粒子尺寸和透明度实现。 4. **颜色映射策略** 根据递归深度 `depth`（0 到 `Iteration`），使用 HSL 色相循环： ``` hue = (depth / Iteration) * 360° saturation = 0.8 + 0.2 * sin(depth * 1.5) lightness = 0.5 + 0.3 * cos(depth * 0.8) ``` 深度越深，色相从红（0°）渐变到紫（360°），亮度波动突出结构层次。 **Three.js 实现代码** ```javascript // 场景、相机、渲染器设置（省略基础部分） const particleCount = 200000; const positions = new Float32Array(particleCount * 3); const colors = new Float32Array(particleCount * 3); const depths = new Float32Array(particleCount); // 递归生成粒子坐标（Mandelbulb） function generateFractal(iteration, power) { for (let i = 0; i < particleCount; i++) { let x = Math.random() * 2 - 1; let y = Math.random() * 2 - 1; let z = Math.random() * 2 - 1; let r = Math.sqrt(x*x + y*y + z*z); if (r === 0) r = 0.001; let theta = Math.acos(z / r); let phi = Math.atan2(y, x); let depth = 0; for (let j = 0; j < iteration; j++) { r = Math.pow(r, power); theta = theta * power; phi = phi * power; x = r * Math.sin(theta) * Math.cos(phi); y = r * Math.sin(theta) * Math.sin(phi); z = r * Math.cos(theta); depth = j; } positions[i*3] = x; positions[i*3+1] = y; positions[i*3+2] = z; depths[i] = depth; // 颜色映射 const hue = (depth / iteration) * 360; const sat = 0.8 + 0.2 * Math.sin(depth * 1.5); const light = 0.5 + 0.3 * Math.cos(depth * 0.8); const color = new THREE.Color().setHSL(hue / 360, sat, light); colors[i*3] = color.r; colors[i*3+1] = color.g; colors[i*3+2] = color.b; } } // 粒子材质与几何体 const geometry = new THREE.BufferGeometry(); geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const material = new THREE.PointsMaterial({ size: 0.02, vertexColors: true, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending, depthWrite: false, sizeAttenuation: true }); const points = new THREE.Points(geometry, material); scene.add(points); // 脉冲逻辑（每帧更新） let time = 0; function animate() { time += 0.016; // 约 60fps const scale = 1 + 0.2 * Math.sin(2 * Math.PI * 0.5 * time); points.scale.set(scale, scale, scale); // 景深效果（基于相机位置） const focalZ = camera.position.z - 2; // 焦平面 const positionsAttr = geometry.attributes.position; const sizes = new Float32Array(particleCount); for (let i = 0; i < particleCount; i++) { const z = positionsAttr.getZ(i); const d = Math.abs(z - focalZ); const blur = 0.05 * d / (d + 1); sizes[i] = 0.02 * (1 + blur * 10); // 模糊粒子变大 } geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); material.size = 0.02; // 基础尺寸，实际由 attribute 控制（需自定义 shader） renderer.render(scene, camera); requestAnimationFrame(animate); } // GUI 参数调整 import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'; const gui = new GUI(); const params = { iteration: 5, power: 8 }; gui.add(params, 'iteration', 1, 10, 1).onChange(() => { generateFractal(params.iteration, params.power); geometry.attributes.position.needsUpdate = true; geometry.attributes.color.needsUpdate = true; }); gui.add(params, 'power', 2, 12, 0.5).onChange(() => { generateFractal(params.iteration, params.power); geometry.attributes.position.needsUpdate = true; geometry.attributes.color.needsUpdate = true; }); ``` **深度效果优化说明** 为精确实现 DoF，建议使用自定义 ShaderMaterial 替代 PointsMaterial，在顶点着色器中根据深度调整粒子尺寸和透明度。上述代码展示了基础思路，实际生产环境需扩展为自定义着色器以支持逐粒子尺寸属性。