Three.js粒子系统实战：火焰特效从着色器到参数调优

简介：一份基于three.js构建的火焰效果演示源码包，面向Web前端与三维可视化学习者。项目通过粒子系统模拟火焰动态，核心逻辑清晰，调整粒子颜色参数后还可呈现烟雾效果，适合新手理解粒子属性与着色器配合的基本思路。资源共包含3个文件，以js脚本和html页面为主：两个js文件分别负责场景控制与轨道交互，html文件用于直接运行展示，整体压缩后约191KB，轻量易部署。目前已有5036人浏览学习。打开演示页面即可观察火焰的粒子运动轨迹，参考配套的three.js与OrbitControls用法，可快速迁移到粒子特效、动态纹理等场景；通过修改颜色和透明度相关参数，能扩展出不同形态的火焰或烟雾效果，为后续自定义视觉特效提供可直接改用的代码基础。

1. 火焰demo是什么，以及它解决的真实问题

在Web端做火焰效果，很多人第一反应是找一段现成的shader贴上去，或者挂一个序列帧循环播放。但一旦遇到背景不是纯黑、需要跟场景里其他物体产生遮挡关系、或者要在大屏上长时间跑的场景，这两种方案都会翻车——序列帧容易发灰，shader贴图则完全没有体积感。基于three.js的火焰demo，本质上是把火焰拆成大量带生命周期的粒子，用GPU去更新位置和颜色，在浏览器里实时算出一团可交互、可旋转、可被光照影响的火焰。它能解决的场景很具体：数据大屏的火焰主题背景、产品页的燃烧效果展示、游戏里的技能特效、甚至工业仿真里的火焰示意。这套方案的核心不是“画出火焰”，而是“用可控制的参数模拟燃烧过程”，适合需要把火焰跟三维场景融合、又要保证帧率稳定的从业者。下面直接从实现思路开始拆。

2. 三条路线怎么选，以及粒子方案的原理支点

2.1 三种实时火焰方案的对比：为什么粒子系统胜出

做火焰demo，业内常见路线有三条。第一条是序列帧动画，把预渲染的火焰帧贴在平面上循环播放，优点是效果上限高、可控性好，缺点是文件体积大、视角受限——平面一旦旋转就会穿帮。第二条是体积烟雾模拟，用ray marching或3D纹理实时计算光线穿过火焰的散射，效果最真实，但计算量在Web端很难压到60帧，移动端基本不用考虑。第三条就是粒子系统加自定义着色器，用几百个带生命周期的粒子组成火焰形状，每个粒子独立上升、缩放、变色，最终靠叠加形成视觉上的连续燃烧体。这条路线的核心优势在于：粒子数量可控、GPU负担小、视角自由、颜色和形态完全靠一组参数驱动，改一个上升速度就能让火焰从温和变成剧烈。

我一般会直接选第三条，因为three.js里Points对象本身就是为这种场景准备的。它不像Mesh那样有面片概念，每个粒子只是一组坐标和属性值，渲染时全部交给GPU处理。火焰的“体积感”靠的是粒子在空间里的密度分布和半透明叠加，而不是真正的几何体积。换句话说，你看到的一团火焰，其实是几十上百个半透明圆形光点在共同演出。

2.2 粒子系统的关键结构：从数据到可视化的完整链路

要理解火焰demo的代码，先记住一条链路：数据在JavaScript里生成，属性在顶点着色器里演化，颜色在片元着色器里决定。具体来说，每个粒子需要记录三类信息：初始位置、运动参数、生命周期状态。初始位置决定火焰在空间里的分布范围，通常是一个圆形底面加上高度偏移；运动参数包含上升速度、湍流幅度、随机种子，这些决定了粒子飞行的“性格”；生命周期状态则由一个从0到1不断循环的时间变量控制，驱动粒子从出生、燃烧到熄灭的整个过程。

数据准备好之后交给BufferGeometry，three.js会把属性数组绑定到GPU缓冲。这里有个容易忽略的细节：粒子数量一旦确定，属性数组长度就固定了，我们不能在运行时要增删粒子，只能靠每个粒子的“当前状态”来伪装出生和死亡。最常见的手法是为每个粒子分配一个随机的初始相位，让它们在不同时间点出生，这样整体看起来就像源源不断的火焰。顶点着色器每帧根据时间推进相位，把对应的粒子高度、偏移量算出来，片元着色器再根据相位查颜色和透明度。整个过程不涉及cpu逐帧计算每个粒子的位置，性能核心就在这里。

2.3 为什么用ShaderMaterial而不是PointsMaterial

three.js内置的PointsMaterial只支持设置单个颜色和大小，没法做火焰这种“粒子内部有渐变、透明度随生命期变化”的效果。所以必须用ShaderMaterial，自己接管顶点变换和片元着色。很多新手在这里有一个误解，以为ShaderMaterial意味着要自己处理投影矩阵、模型视图矩阵这些底层的玩意。其实three.js预置了projectionMatrix、modelViewMatrix这些uniform，在顶点着色器里直接用就可以了，不需要从零搭建矩阵管线。

选择ShaderMaterial还有个附带好处：渲染队列可以手动控制。Points内置材质默认的深度测试和混合模式不太适合火焰这种半透明叠加，ShaderMaterial里我们可以把blending设成AdditiveBlending，让每个粒子叠加发光，而不是互相遮挡变暗。这个设置在火焰demo里几乎决定了成败，稍后避坑章节会专门说。

3. 手写火焰粒子系统：从零到能跑的完整实现

3.1 初始化场景、相机与渲染器骨架

先搭一个最简的three.js骨架，不引入任何外部插件。用vite初始化一个项目，装好three后，在main.js里写如下基础结构：

import * as THREE from 'three'; // 场景、相机、渲染器 const scene = new THREE.Scene(); scene.background = new THREE.Color(0x0a0a14); // 深色背景便于观察火焰 const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100); camera.position.set(0, 2.5, 6); camera.lookAt(0, 1.5, 0); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); document.body.appendChild(renderer.domElement); // 火焰粒子系统挂载到这个group上，方便整体位移 const flameGroup = new THREE.Group(); scene.add(flameGroup); // 动画循环 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate();

这段代码的核心是渲染器配置。setPixelRatio限制最大像素比到2，是为了防止Retina屏上粒子尺寸计算失真，火焰边缘出现锯齿。camera的位置和lookAt目标决定了火焰出现在画面中心偏下，给粒子上升留出空间。flameGroup作为容器，后续如果需要把火焰放在某个物体上，只需调整group的position，而不动粒子内部数据。

3.2 用BufferGeometry存放粒子的位置、速度与随机种子

火焰粒子最朴素的实现是每个粒子从底部生成，随着时间向上运动，同时向四周扩散。因此在BufferGeometry中设置三类固定属性：初始位置、随机种子、生命周期起始相位。

const PARTICLE_COUNT = 200; const positions = new Float32Array(PARTICLE_COUNT * 3); const seeds = new Float32Array(PARTICLE_COUNT); const phases = new Float32Array(PARTICLE_COUNT); for (let i = 0; i < PARTICLE_COUNT; i++) { // 粒子出生位置：底部半径1.2的圆内，高度0附近 const radius = Math.random() * 1.2; const angle = Math.random() * Math.PI * 2; positions[i * 3] = Math.cos(angle) * radius; positions[i * 3 + 1] = Math.random() * 0.3; positions[i * 3 + 2] = Math.sin(angle) * radius; // 随机种子用于让每个粒子的偏移和运动节奏不同 seeds[i] = Math.random() * Math.PI * 2; // 生命周期起始相位：错开出生时间，避免所有粒子同时喷发 phases[i] = Math.random(); } const geometry = new THREE.BufferGeometry(); geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('seed', new THREE.BufferAttribute(seeds, 1)); geometry.setAttribute('phase', new THREE.BufferAttribute(phases, 1));

属性命名要跟着色器里的attribute变量一一对应。这里position是内置的，seed和phase是自定义的。注意phase的取值范围是0到1，代表整个生命周期的进度。position的y坐标初始只有0到0.3，说明粒子出生在火焰根部，之后靠着色器里的time变量把它推上去。radius控制在1.2以内，是为了让火焰底部不会太宽，视觉上呈现“下窄上宽”的喷射形态，这和真实火焰的形态是一致的。

3.3 顶点着色器：上升、湍流与循环生命周期

顶点着色器是整个火焰demo里最核心的计算单元，每个粒子每帧都会经过它。传入的时间uniform从动画循环里更新，粒子根据phase和time算出自己当前的生命周期进度，然后决定高度、水平偏移和可见性。

// vertex shader attribute float seed; attribute float phase; uniform float uTime; uniform float uSpeed; uniform float uTurbulence; uniform float uSize; varying float vProgress; varying float vSeed; void main() { // 生命周期进度：时间驱动，相位错开，实现循环 float progress = fract(uTime * uSpeed + phase); // 粒子上升：0到1映射到0到火焰高度的区间 vec3 pos = position; float height = progress * 3.5; pos.y += height; // 湍流偏移：用种子和高度做sin扰动，越高越晃 float wobble = sin(uTime * 2.0 + seed) * uTurbulence; float wobble2 = cos(uTime * 1.8 + seed * 2.0) * uTurbulence; pos.x += wobble * progress; pos.z += wobble2 * progress; // 随高度增加粒子逐渐变大，模拟火焰扩散 float sizeScale = 0.8 + progress * 1.2; vProgress = progress; vSeed = seed; vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0); gl_PointSize = uSize * sizeScale * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; }

这里的逻辑有几个关键设计。首先progress是fract后的小数，天然循环，不需要额外的出生和死亡标记。其次湍流的振幅乘以progress，意味着粒子在低处时摆动小，越往上晃得越厉害，符合火焰上升时空气扰动加剧的直觉。gl_PointSize用300除以视角距离，这是three.js里常用的点大小缩放方式，保证粒子离相机远时不会小到消失，近时不会大到糊屏。uSize是全局缩放系数，调它可以把整团火焰放大缩小而不影响粒子数量。如果希望火焰在强风环境下形态更乱，调大uTurbulence即可，不需要改代码逻辑。

3.4 片元着色器：从金黄到暗红的渐变与透明度衰减

粒子在屏幕上呈现为圆形光斑。片元着色器要做两件事：画出圆形边缘并做抗锯齿，以及按生命周期进度从亮黄过渡到橙红再到暗色。这里我用距离场判断片元是否在圆内，用smoothstep做边缘柔化。

// fragment shader varying float vProgress; varying float vSeed; void main() { // 计算当前片元到粒子中心的距离，gl_PointCoord范围0到1 vec2 uv = gl_PointCoord - 0.5; float dist = length(uv); // 圆形粒子：smoothstep柔化边缘，避免锯齿 float alpha = 1.0 - smoothstep(0.3, 0.5, dist); // 火焰颜色：三段渐变，从亮黄白到橙红到暗红 vec3 colorA = vec3(1.0, 0.95, 0.6); // 火焰核心，亮黄白 vec3 colorB = vec3(1.0, 0.45, 0.1); // 中层，橙红 vec3 colorC = vec3(0.5, 0.1, 0.02); // 外层，暗红 vec3 color; if (vProgress < 0.4) { // 出生阶段：亮到黄的过渡 color = mix(colorA, colorB, vProgress / 0.4); } else if (vProgress < 0.8) { // 燃烧中段：从橙红向暗红走 color = mix(colorB, colorC, (vProgress - 0.4) / 0.4); } else { // 熄灭阶段：快速变暗变透明 color = colorC * (1.0 - (vProgress - 0.8) / 0.2); } // 透明度：出生和熄灭阶段都压低，中段最实 float lifeAlpha = sin(vProgress * 3.14159) * 0.85; float finalAlpha = alpha * lifeAlpha; // 叠加到场景，做常见的火焰混合 gl_FragColor = vec4(color * finalAlpha, finalAlpha); }

片元着色器里最值得留意的是分段渐变逻辑。如果用单一的mix线性插值从黄到红，中间会经过一段浑浊的棕色，火焰看起来像被污染了。这里拆成两段，每段只混合两种相近颜色，视觉过渡就干净很多。透明度曲线用sin函数的原因在于粒子出生和熄灭都应该是渐进过程，sin在0和π两端都是0，中间接近1，天然匹配生命周期的平滑性。0.85这个系数不是拍脑袋定的，如果太接近1，粒子叠加时中心会过曝成纯白，失去层次感。

3.5 合入场景并更新uniform

着色器写完之后，需要把它挂到ShaderMaterial上，再创建Points加入场景，并在动画循环里更新uTime。

const material = new THREE.ShaderMaterial({ vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: { uTime: { value: 0 }, uSpeed: { value: 0.4 }, uTurbulence: { value: 0.35 }, uSize: { value: 28 }, }, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, }); const flame = new THREE.Points(geometry, material); flameGroup.add(flame); // 动画循环里更新uTime function animate() { requestAnimationFrame(animate); material.uniforms.uTime.value += 0.016; // 约60fps推进 renderer.render(scene, camera); } animate();

注意uniforms里的uTime没有用时钟计算delta，而是固定加0.016。这样一个缺点是帧率不稳时速度会偏慢或偏快，但火焰demo通常只做展示，固定步长可以让粒子运动速度跟帧率无关，视觉更稳定。实际项目中如果需要精确计时，应该用clock.getDelta()，但要注意乘以一个倍率，否则火焰会显得迟缓。depthWrite设为false是半透明渲染的黄金法则，稍后避坑章节专门展开。

4. 参数调优与避坑：让火焰从“冒烟”到“燃烧”

4.1 核心参数的推荐区间与手感方向

同样的代码，参数设置不同，看起来可能完全是两个东西。火焰demo里最影响观感的四个参数是粒子数量、uSpeed、uTurbulence和uSize。我整理了一份常用的参考区间，按从“温和”到“剧烈”的方向排列。

新手最容易犯的错是直接调大粒子数量来追求密实感。实际上把uSize从28提到40，视觉密度提升比粒子数翻倍更直观。但uSize过大的副作用是火焰边缘出现明显的方形点阵轮廓，因为gl_PointSize的粒子本质上是正方形的点精灵，圆的观感全靠片元着色器里的距离场裁剪。我的习惯是先定uSize，再定粒子数量，最后用uTurbulence微调形态。uSpeed要跟场景中的相机距离联动，相机拉远时火焰在屏幕上的位移速度不变会显得拖沓，可以按相机距离的平方根做缩放。

4.2 避坑记录一：半透明粒子互相遮挡导致火焰变黑

现象：火焰内部出现不自然的黑色斑块，粒子重叠的地方不是变亮而是变暗。

原因：three.js默认的NormalBlending会按深度混合半透明物体，粒子位置交错时，后面的粒子会部分盖住前面的粒子，叠加处反而显得脏。火焰本质上是发光体，不是反射光线的实体，不应该互相遮挡。

解决：把blending切换成THREE.AdditiveBlending，同时把depthWrite设为false。加法混合的结果是粒子颜色直接相加，重叠区域越来越亮，正好符合火焰发光的感觉。另外记得把material.transparent设为true，否则shader里的alpha不会被用于混合计算。

4.3 避坑记录二：火焰颜色发棕，渐变断层明显

现象：火焰不是从亮黄到橙红，而是中间有一段很脏的棕褐色，像烧焦的塑料。

原因：直接用mix从亮黄插值到深红时，RGB三个分量不是同步变化，黄色和红色的中间值会经过一个低饱和度的棕色区域。这在颜色数学上是必然的，跟火焰物理无关。

解决：把渐变拆成多段，每段只混合相邻的两个目标色。同时把颜色空间的gamma校正考虑进去。three.js默认输出到sRGB，但shader里计算的颜色如果在线性空间直接混合，结果会偏亮。实际处理时可以在片元着色器末尾做一个近似校正：color = pow(color, vec3(0.9))，压一压高光，让火焰核心保留细节而不是一片惨白。

4.4 避坑记录三：粒子闪烁或突然消失

现象：火焰跳动很不稳定，部分粒子在生命周期中途直接消失，还有的粒子角上出现裁切正方形。

原因：最常见的是gl_PointCoord在点精灵边缘处采样错误，或者gl_PointSize小于1像素时被GPU直接丢弃。另一个隐蔽原因是没有设置gl_PointSize的最小值，粒子在远处时尺寸趋近于0，片元着色器里smoothstep(0.3, 0.5, dist)会因为采样点太少出现黑点。

解决：在顶点着色器里对gl_PointSize做一个下限保护：gl_PointSize = max(gl_PointSize, 2.0)，保证最近的粒子也至少有2像素大小。同时把片元着色器的alpha计算改为alpha = 1.0 - smoothstep(0.28, 0.48, dist)，缩短柔化区间，减少边缘的锯齿区域。

4.5 避坑记录四：火焰底部悬空，与地面没有衔接

现象：火焰粒子从半空中凭空生成，底部有一个明显的空心截面。

原因：粒子出生时y坐标随机分布在0到0.3，但所有粒子一出生就开始上升，没有被“压在底部”的粒子，所以底部看起来稀疏且悬空。

解决：在片元着色器的lifeAlpha里压低出生阶段的透明度还不够，更有效的手段是让粒子在低progress时水平偏移也很小，制造“从根部长出”的视觉效果。可以在顶点着色器里让wobble效果乘上progress的平方而不是progress本身，这样底部的粒子几乎只在垂直方向运动，视觉上火焰是从一个点向上延伸的。

5. 进阶：把Demo变成能用的火焰组件

火焰demo一旦跑通，下一步就是让它具备真实项目的可用性。三个最实用的进阶方向：热浪扭曲、多层叠加、火焰与场景的交互反馈。

热浪扭曲推荐用后处理Pass实现，常见的做法是单独渲染一张火焰的亮度贴图，然后对主场景进行uv偏移采样。编辑器里调uv偏移量，强度在0.002到0.01之间比较合适，过高会让整个画面像泡在水里。如果不想引入后处理库，也可以做一个廉价版：在火焰粒子里额外增加一个呼吸scale参数，让火焰整体大小按sin(uTime * 1.2)波动，同时火焰周围的近景物体做一个反向形变。这种做法扛不住近距离特写，但大屏场景完全够用。

多层叠加是提升火焰质感最直接的路径。用同样一套代码创建两组粒子：一组粒子数量多、尺寸小、速度慢，颜色偏暗红，作为火焰的底层体积；另一组粒子数量少、尺寸大、速度快，颜色偏亮黄，作为高温核心。两组粒子共享同一个flameGroup，转速和湍流方向略微错开。这种分层的视觉逻辑模仿的是真实火焰内部高温区和外部低温区的结构，叠加后火焰的立体感会明显上升。注意两组粒子的uniform要分别实例化，不能共享同一个ShaderMaterial。

光照交互方面，火焰通常是场景中的光源而不是被光照物体。如果场景里有地面或者其他几何体，可以在火焰中心放一个PointLight，颜色设为橙色，强度设置为2到3，距离3到5。这样一来火焰粒子本身是自发光材质不受光照影响，但它能照亮周围的地面，视觉上火焰和场景就融合了。

最后说一个自己的血泪教训：火焰demo做出来很容易，调好很难，而且调试时眼睛很容易疲劳。盯着火焰看十分钟以上，判断力就会下降，改出来的参数往往越调越怪。我的习惯是每次只改一个参数，改完截一张图，标注参数值，隔一段时间再回头对比。这样攒下来一组自己项目的参数预设，换场景时直接套用比反复试错效率高得多。three.js的火焰方案做到这个程度，已经可以支撑实际项目了，剩下的无非是换配色、调数值、加交互接口。希望帮到你。

本文还有配套的精品资源，点击获取