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

2024-05-20 11:48:37作者：范垣楠Rhoda

npm badge test badge

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

Landing Image

链接资源

背景

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);