Three.js 粒子特效太难写？这个库让火焰、爆炸、魔法效果开箱即用

在 three.js 项目里手写粒子效果是件费时的事。火焰需要控制每个粒子的颜色渐变和生命周期，爆炸需要做扩散方向和衰减曲线，拖尾特效还要维护一段连续的几何体。从零写一套能用的效果，经常要花掉几天时间。

three.quarks 是一个专门为 three.js 设计的粒子系统库，用 TypeScript 编写，内置批量渲染优化、可视化编辑器和 React Three Fiber 集成，可以直接在浏览器里设计效果并导出为 JSON，项目里加载一行代码就能跑。

批量渲染是关键

three.js 默认情况下，每个粒子系统都是一个独立的 draw call。场景里有 10 个粒子效果，就是 10 次 draw call，粒子数量一多，GPU 的调度压力就上来了。

three.quarks 用 BatchedRenderer 把多个粒子系统合并进同一次渲染调用。同一材质的粒子系统会被合批处理，draw call 数量不随效果数量线性增长。这是它在游戏类项目里能稳定运行的基础。

主要功能

渲染模式

four 种渲染模式覆盖了常见特效需求：

Billboard：粒子始终朝向相机，适合火花、烟雾、光点
Stretched Billboard：沿运动方向拉伸，适合子弹轨迹、雨滴
Mesh：粒子以 3D 网格渲染，可以做碎片、叶片等带体积感的效果
Trail：拖尾效果，沿粒子路径生成连续的条带几何体

发射形状

控制粒子从哪里出生：点、球体、半球体、锥形、圆形、网格表面、网格阵列。锥形发射加上速度曲线可以快速做出火焰底部的形态，球体发射适合爆炸扩散。

行为系统

行为（Behavior）控制粒子在生命周期内如何变化：

ColorOverLife：颜色随时间变化，火焰从白变黄再变红
SizeOverLife：大小随时间变化，粒子消散时缩小
RotationOverLife：旋转速度变化
ApplyForce：施加恒定力，模拟重力或风场
OrbitOverLife：轨道运动，适合魔法旋转粒子
SubEmitter：粒子在特定时间点触发子发射器，做爆炸后的火花二次扩散

行为可以叠加组合，用 PiecewiseBezier（分段贝塞尔曲线）定义任意形状的变化曲线。

Unity Shuriken 格式导入

如果团队里有 Unity 美术已经做好了粒子效果，three.quarks 支持直接导入 Unity Shuriken 格式的配置，不需要在 Web 端重新调参。

安装与使用

安装 three.quarks 需要同时安装 three.js：

npm install three.quarks three

基本使用流程

import { BatchedRenderer, ParticleSystem } from 'three.quarks';
 
// 创建批量渲染器并加入场景
const batchedRenderer = new BatchedRenderer();
scene.add(batchedRenderer);
 
// 加载 JSON 效果文件（从可视化编辑器导出）
const loader = new QuarksLoader();
loader.load('./effects/fire.json', (particles) => {
  scene.add(particles);
  batchedRenderer.addSystem(particles);
});
 
// 在动画循环里更新
function animate(delta) {
  batchedRenderer.update(delta);
}

从可视化编辑器开始

对于不想手写配置的场景，three.quarks 提供了在线可视化编辑器（quarks.art/create）。编辑器里可以实时调整发射形状、粒子行为和颜色曲线，导出 JSON 后在项目里直接加载。

代码方式定义效果

如果需要在运行时动态控制参数，也可以完全用代码定义：

const system = new ParticleSystem({
  duration: 2,
  looping: true,
  startLife: new IntervalValue(0.8, 1.2),
  startSpeed: new IntervalValue(2, 4),
  startSize: new IntervalValue(0.1, 0.3),
  startColor: new ConstantColor(new Vector4(1, 0.5, 0, 1)),
  emissionOverTime: new ConstantValue(100),
  shape: new ConeEmitter({ radius: 0.5, angle: 30 }),
});
system.addBehavior(new SizeOverLife(new PiecewiseBezier([[...]])));

React Three Fiber 集成

如果项目基于 React，安装 @quarks/r3f 包后可以用声明式组件方式使用：

npm install @quarks/r3f

import { Particles, ParticleSystem } from '@quarks/r3f';
 
function FireEffect() {
  return (
    <Particles>
      <ParticleSystem src="./fire.json" />
    </Particles>
  );
}

写在最后

three.quarks 目前以 MIT 协议开源，官方文档在 quarks.art，有完整的 API 参考和入门指引。项目处于活跃维护状态，有 Discord 社区可以交流。

适合在以下场景使用：three.js 游戏或交互项目需要多个复杂粒子效果、团队有 Unity 美术资源需要迁移到 Web、或者需要在运行时动态生成和克隆粒子效果。如果项目只需要一两个简单的粒子效果，手写 three.js Points 可能更直接，不需要引入额外依赖。

GitHub：https://github.com/Alchemist0823/three.quarks (opens in a new tab)

neon-corridor threejs-aurora