推荐使用：three.quarks - 炫酷三维粒子效果库

three.quarks 是一个基于现代 TypeScript 编写的高性能 JavaScript 三维粒子系统视觉效果库，专为流行的 three.js 库设计。它提供了一个直观的 WYSIWYG 可视化编辑器 three.quarks-editor，使您可以轻松创建和编辑粒子效果。

链接资源

• 官方网站
• 行为准则
• 贡献指南
• 开发指南
• 在线示例
• 变更日志
• Sandbox 示例
• React Three Fiber 示例
• 讨论区

背景

three.quarks 是一个通用的粒子系统库，其灵感来源于 Unity 的 Shuriken 粒子系统，并且与之部分兼容。在高性能的 three.js 基础上构建，该库提供了强大的可视化编辑工具，让开发者能够创建各种炫酷的三维粒子效果。

发展路线图

• 使用 Rust 重构模拟编译器代码
• 在 CPU 上运行 WebAssembly 粒子模拟（进行中）
• GPU 上的 GPU 模拟（进行中）
• 节点式/脚本化粒子系统（进行中）
• 提高模拟频率以优化性能
• Unity 和独立平台跨平台原生插件支持

主要特性

• 半兼容 Unity Shuriken 粒子系统
• 支持 Mesh 标准材质和基本材质
• 批处理渲染多个粒子系统（减少绘制调用）——BatchedParticleRenderer
• 发射形状和控制
  • 网格表面发射器
• 插件系统 —— Plugin
  • 自定义行为
  • 自定义发射器形状
• 4 种渲染器类型
  • 平面
  • 拉伸平面
  • 网格渲染器
  • 尾迹渲染器 TrailBatch
• 在网格表面产生粒子
• 配置可变的渲染模式和混合模式
• 1D Bézier 曲线函数以调整效果
• 图像贴图动画
• 用户扩展和自定义功能
• 实时编辑器，用于测试和创建视觉效果 three.quarks-editor
• VFX json 文件加载和保存

three.quarks 利用 CPU 计算粒子信息，通过定制着色器、实例化和批处理技术，尽可能地减少绘制调用来渲染粒子。支持一维分段 Bézier 曲线，用于实现可定制的变换视觉效果。最重要的是，开发者可以通过添加自己的行为来自定义粒子系统的运作方式。

安装与使用

使用以下命令安装：

npm install three.quarks

查看 examples 目录以了解如何使用。将粒子系统添加到场景中的例子如下：

const clock = new THREE.Clock();
const batchSystem = new BatchedRenderer();
const texture = new TextureLoader().load("atlas.png");

// 粒子系统配置
// ... 省略 ...

// 创建粒子系统并添加自定义行为
// ... 省略 ...

// 添加粒子系统到 batchSystem
batchSystem.addSystem(muzzle1);

// 将 batchSystem 添加到场景
scene.add(batchSystem);

适用场景

无论是在游戏开发、动态图形设计，还是网页和应用的交互效果中，three.quarks 都能展现强大且高效的粒子效果。只需简单的配置即可实现复杂的视觉特效，对于希望快速迭代视觉元素的开发者来说，这是一个理想的选择。

结论

凭借其出色的性能、丰富的功能和易于使用的编辑器，three.quarks 成为了一个值得信赖的粒子效果解决方案。加入我们的 Discord 社区，与开发者们一起探讨这个项目的潜力，共同创造更多令人惊叹的三维视觉体验！