three.quarks核心组件详解：ParticleEmitter与ParticleSystem

three.quarks核心组件详解：ParticleEmitter与ParticleSystem

【免费下载链接】three.quarksThree.quarks is a general purpose particle system / VFX engine for three.js项目地址: https://gitcode.com/GitHub_Trending/th/three.quarks

three.quarks是一个基于three.js的通用粒子系统/VFX引擎，为开发者提供了强大的粒子效果创建工具。本文将深入解析其核心组件ParticleEmitter与ParticleSystem，帮助你快速掌握粒子系统的构建与控制方法。

核心组件概览 🌟

在three.quarks中，粒子系统的构建主要依赖两个核心组件：ParticleEmitter（粒子发射器）和ParticleSystem（粒子系统）。它们分工明确又紧密协作，共同构成了完整的粒子效果解决方案。

图：three.quarks引擎创建的多样化粒子效果，展示了不同发射器配置下的视觉表现

ParticleEmitter：粒子的"出生地"

ParticleEmitter是场景图中的一个节点对象，负责在3D空间中发射粒子。每个发射器仅关联一个粒子系统，通过继承Object3D实现了与three.js场景的无缝集成。

export class ParticleEmitter<E extends Object3DEventMap = Object3DEventMap> extends Object3D<E> implements IEmitter { type = 'ParticleEmitter'; system: IParticleSystem; constructor(system: IParticleSystem) { super(); this.system = system; } }

核心功能：

  • 作为粒子系统在3D场景中的视觉载体
  • 管理粒子的发射位置和方向
  • 处理粒子系统与场景的坐标转换
  • 提供粒子系统的JSON序列化能力

ParticleSystem：粒子的"指挥官"

ParticleSystem是粒子效果的核心控制器，负责管理粒子的生命周期、行为和渲染属性。它定义了粒子如何生成、如何运动以及如何呈现。

主要参数：

  • 粒子生命周期（startLife）
  • 初始速度（startSpeed）
  • 初始大小（startSize）
  • 初始颜色（startColor）
  • 发射率（emissionOverTime）
  • 粒子行为（behaviors）

ParticleEmitter深度解析 🚀

基本结构与功能

ParticleEmitter本质上是three.js的Object3D对象，因此可以像其他3D对象一样添加到场景中，并进行位置、旋转和缩放变换。

// 创建粒子系统 const particleSystem = new ParticleSystem(parameters); // 获取发射器并添加到场景 const emitter = particleSystem.emitter; scene.add(emitter);

关键方法

  1. clone()：创建发射器副本，用于快速复制粒子效果
  2. toJSON()：将发射器配置序列化为JSON，便于保存和加载
  3. dispose()：清理发射器资源，避免内存泄漏

与场景的集成

发射器通过以下路径实现与three.js场景的集成： packages/three.quarks/src/ParticleEmitter.ts

它继承了Object3D的所有变换能力，因此可以：

  • 通过position属性设置发射位置
  • 通过rotation属性控制发射方向
  • 通过scale属性调整粒子发射范围
  • 通过layers属性控制可见性

ParticleSystem深度解析 ⚙️

粒子系统参数配置

创建ParticleSystem时，需要提供一系列参数来定义粒子行为：

const parameters: ParticleSystemParameters = { duration: 5, // 系统持续时间 looping: true, // 是否循环 startLife: new ConstantValue(3), // 粒子生命周期 startSpeed: new ConstantValue(10), // 初始速度 startSize: new ConstantValue(2), // 初始大小 emissionOverTime: new ConstantValue(20), // 每秒发射粒子数 shape: new SphereEmitter(), // 发射形状 material: new MeshBasicMaterial({ color: 0xffff00 }), // 粒子材质 behaviors: [new GravityForce(new Vector3(0, -9.8, 0))] // 粒子行为 }; const particleSystem = new ParticleSystem(parameters);

粒子生命周期管理

ParticleSystem通过复杂的状态机管理粒子的发射过程，主要包括：

  1. 常规发射：基于emissionOverTime参数持续发射粒子
  2. 爆发发射：通过emissionBursts参数定义粒子爆发
  3. 生命周期控制：通过startLife参数控制粒子存活时间

相关实现代码可在以下文件查看： packages/three.quarks/src/ParticleSystem.ts

粒子行为系统

行为系统是three.quarks的核心特性，通过添加不同的Behavior可以实现丰富的粒子运动效果：

  • GravityForce：重力效果
  • ColorOverLife：生命周期颜色变化
  • SizeOverLife：生命周期大小变化
  • ForceOverLife：生命周期受力变化
  • OrbitOverLife：轨道运动

行为系统的注册和管理在以下文件中实现： packages/quarks.core/src/behaviors/Behavior.ts

组件协作流程 🔄

ParticleEmitter与ParticleSystem的协作流程如下：

  1. 初始化阶段：

    • 创建ParticleSystem并配置参数
    • 系统自动创建关联的ParticleEmitter
    • 将发射器添加到3D场景

  2. 运行阶段：

    • 调用particleSystem.update(deltaTime)更新系统状态
    • 系统根据参数发射新粒子
    • 应用行为系统更新粒子状态
    • 通过发射器在场景中渲染粒子

  3. 控制阶段：

    • 通过emitter控制粒子发射位置
    • 通过system控制粒子行为和属性
    • 调用pause()/play()控制粒子系统暂停/继续
    • 调用restart()重置粒子系统

实战应用示例 💡

创建简单粒子效果

// 创建材质 const material = new MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.8 }); // 创建粒子系统参数 const params: ParticleSystemParameters = { duration: 10, looping: true, startLife: new ConstantValue(2), startSpeed: new IntervalValue(1, 3), startSize: new ConstantValue(1), emissionOverTime: new ConstantValue(50), shape: new SphereEmitter({ radius: 0.5 }), material: material, behaviors: [ new GravityForce(new Vector3(0, -5, 0)), new ColorOverLife(new Gradient([ { time: 0, value: new Vector4(1, 1, 0, 1) }, { time: 1, value: new Vector4(1, 0, 0, 0) } ])) ] }; // 创建粒子系统 const particleSystem = new ParticleSystem(params); // 添加到场景 scene.add(particleSystem.emitter); // 在动画循环中更新 function animate() { requestAnimationFrame(animate); particleSystem.update(0.016); // 假设60fps renderer.render(scene, camera); }

常用控制方法

// 暂停粒子系统 particleSystem.pause(); // 继续粒子系统 particleSystem.play(); // 停止并重置粒子系统 particleSystem.stop(); // 停止发射新粒子（现有粒子会继续播放完成） particleSystem.endEmit(); // 销毁粒子系统 particleSystem.dispose();

总结

ParticleEmitter与ParticleSystem是three.quarks的核心组件，前者负责粒子在3D空间中的发射位置和方向，后者负责粒子的生命周期、行为和渲染属性。通过这两个组件的协作，开发者可以创建出丰富多样的粒子效果。

掌握这两个核心组件后，你可以进一步探索three.quarks的高级特性，如节点式视觉效果编辑、GPU加速渲染等，打造更加惊艳的视觉体验。

要开始使用three.quarks，你可以通过以下命令克隆仓库：

git clone https://gitcode.com/GitHub_Trending/th/three.quarks

然后参考examples目录下的示例代码，快速上手粒子效果开发！

【免费下载链接】three.quarksThree.quarks is a general purpose particle system / VFX engine for three.js项目地址: https://gitcode.com/GitHub_Trending/th/three.quarks

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考