tsParticles 粒子碰撞系统全解collisions 选项、bounce/destroy/absorb 三种模式与 overlap 防重叠机制【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles本文以 tsParticles 官方选项文档 Collisions.md 为主体系统讲解particles.collisions配置如何控制粒子之间的碰撞行为。读完本文你将掌握三种碰撞模式bounce / destroy / absorb的完整配置方式、overlap出生防重叠机制的默认值与行为边界并能结合 interactions/particles/collisions 包中的源码理解碰撞检测、能量守恒修正与吸收计算的底层实现从而把碰撞效果稳定地用到自己的粒子背景、街机风特效或粒子吞噬场景中。1. 文档定位collisions 选项控制什么官方文档给出的定义非常直接Controls how particles interact when they intersect each other.即particles.collisions负责控制粒子彼此相交时的交互方式。该选项由独立包tsparticles/interaction-particles-collisions见 package.json提供随 particles 全量 bundle 一同发布在配置中通常写作{ particles: { collisions: { enable: true, mode: bounce } } }1.1 属性总表继承文档并补全源码默认值文档 Collisions.md 给出的基础属性如下本文结合选项类 Collisions.ts 的源码补全了默认值和文档未列出的absorb、maxSpeed两个字段KeyTypeExample默认值源码Notesenablebooleantrue/falsefalse启用粒子间碰撞处理modestringbounce/destroy/absorbbounce碰撞行为模式bounceobject见 Bounce 文档复用引擎的ParticlesBounce选项反弹微调选项如damping等overlapobject{ enable: false, retries: 5 }enable: true/retries: 0初始出生时的重叠处理absorbobject{ speed: 5 }speed: 2吸收速度仅mode: absorb时生效maxSpeednumber5050RangeValue参与碰撞的粒子最大速度上限其中mode的合法取值由枚举 CollisionMode.ts 定义export enum CollisionMode { absorb absorb, bounce bounce, destroy destroy, }2. 三种碰撞模式及其行为2.1 文档定义的行为对照Mode行为文档原文归纳源码入口bounce粒子相互弹开双方都保留Bounce.tsdestroy撞击后移除其中一个粒子Destroy.tsabsorb一方吸收另一方产生增大体积/质量的效果Absorb.ts2.2 文档的三段快速示例完整继承基础弹跳碰撞{ collisions: { enable: true, mode: bounce } }街机风破坏性碰撞{ collisions: { enable: true, mode: destroy } }吸收碰撞{ collisions: { enable: true, mode: absorb } }2.3 碰撞检测与分发的底层实现上述三种模式的判定并非各写一套检测逻辑而是统一走一个入口。核心流程可以从源码中清晰读出网格加速查询交互器 Collider.ts 在interact()中先用container.particles.grid.queryCircle(pos1, radius1 * 2)以当前粒子为圆心、两倍半径为查询半径从空间网格中取出候选邻居避免 O(n²) 全量两两比较——这正是文档常见陷阱中提到高粒子数下开启碰撞开销较大仍然可接受的底层原因。逐对过滤候选粒子对必须同时满足双方collisions.enable均为true、双方mode相同、双方都未销毁且不在出生中spawning。值得注意的是p1.options.collisions.mode ! p2.options.collisions.mode时会直接跳过即混合模式一部分粒子 bounce、一部分 destroy不会发生碰撞。深度过滤Math.abs(Math.round(pos1.z) - Math.round(pos2.z)) radius1 radius2时跳过粒子系统支持 z 轴伪深度深度差超过两球半径之和的粒子对不参与碰撞。距离判定getDistance(pos1, pos2) radius1 radius2时视为未相交否则调用 ResolveCollision.ts 按mode分发到absorb/bounce/destroy三个函数。2.4 bounce带能量守恒修正与限速的弹性碰撞bounce() 的实现比单纯换速度方向要讲究先记录碰撞前两粒子的质量m1、m2与速度计算碰撞前总动能keBefore调用引擎的circleBounce两圆弹性碰撞解算交换速度碰撞后重新计算动能keAfter若keAfter相对keBefore出现漂移超过阈值energyDriftThreshold 1e-4则用correctionFactor sqrt(keBefore / keAfter)等比回缩双方速度——这是一个数值稳定化处理防止浮点误差在多帧累积后让粒子越弹越快最后fixBounceSpeed对双方做限速把粒子速度钳制到collisions.maxSpeed默认 50支持 RangeValue 区间取值。这就是为什么配置里可以写maxSpeed: { min: 30, max: 60 }。仓库内 collisionsBounce 示例配置 展示了一个完整可用的弹跳场景80 个粒子、圆形 shape、opacity: 0.5、size10~15、move.speed: 10、collisions: { enable: true }mode 缺省即 bounce背景色#0d47a1并叠加了push/grab/bubble/repulse交互模式。2.5 destroy先弹开、再移除较小一方destroy() 的逻辑分两步若双方都不是unbreakable不可破坏则先执行一次bounce让两粒子在消失前产生弹开的动量效果然后按半径规则移除一方只有 p1 无半径半径为 0→ 销毁 p1只有 p2 无半径 → 销毁 p2双方都有半径 →销毁较小的一方p1.getRadius() p2.getRadius() ? p2 : p1。unbreakable是引擎粒子属性见 Particle.ts 中if true the particle wont destroy on collisions的注释可用于让某些粒子如发射器生成的核心粒子只弹不毁。仓库内 collisionsDestroy 示例配置 是一个典型的街机爆炸方案80 个彩色粒子mode: destroy并且给每个粒子配置了destroy.mode: split——粒子被销毁时会分裂成 1~9 倍大小的子粒子factor4~9子粒子再关闭碰撞、带 1~2 秒的life自动消失配合poisson: { enable: true }泊松分布出生与一个 100×100 的 emitter 持续补充粒子。这套组合拳解释了文档常见陷阱中没有 emitter 的 destroy 模式会让粒子数迅速减少的原因——示例正是靠 emitter 维持了粒子总量。2.6 absorb按 absorb.speed 逐帧吞噬absorb() 的判定规则是大半径粒子吸收小半径粒子r1 r2时 p1 吸收 p2反之亦然每一帧的吞噬量shrinkAmount clamp(absorbSpeed * delta.factor, 0, r2)即以absorb.speed默认 2为速率、按帧间时间因子delta.factor归一化且单帧最多吞完对方半径避免越界体积增长按面积守恒计算p1.size.value sqrt(r1² shrink²)即吸收的面积按圆面积累加再反推半径视觉上表现为平滑长大而不是突增被吸收者半径缩到 pixelRatio高 DPI 屏的像素比时置 0 并destroy()。collisionsAbsorb 示例配置 将absorb.speed调到 5、move.speed压到 2让粒子缓慢漂移时逐渐吃成一个大球适合做生物/引力风格的背景。3. overlap出生防重叠选项文档对overlap的定义是Controls how initial particles are placed when collisions are enabled.控制启用碰撞时初始粒子的摆放方式KeyTypeExample默认值源码Notesenablebooleantrue/falsetrue设为false时禁止出生重叠retriesnumber10寻找无重叠出生点位的尝试次数上限默认值来自 CollisionsOverlap.tsenable true允许重叠、retries 0。3.1 防重叠的判定与失败行为该功能由插件 OverlapPluginInstance.ts 实现其checkParticlePosition()在粒子出生摆点时介入collisions.enable为false或overlap.enable为true时直接放行否则遍历容器内全部粒子只要存在getDistance(pos, p.position) 新粒子半径 对方半径的重叠即判定该点位不可用由引擎换一个点位重试当重试次数tryCount超过retries上限时抛出错误Particle is overlapping and cant be placed——即点位实在放不下时粒子会出生失败而不是强行重叠这在密集场景下是文档提示低 retries 值仍可能出现偶发重叠/失败的机制来源。3.2 文档示例出生时禁止重叠{ collisions: { enable: true, overlap: { enable: false, retries: 5 } } }含义粒子出生时不允许与其他粒子重叠最多尝试 5 次寻找合法点位粒子较多、画布较小时建议适当调大retries否则部分粒子可能因找不到位置而出生失败。4. 文档常见陷阱逐条源码解读文档列出了三条 Common pitfalls均可在源码中找到对应依据开启碰撞且粒子数很高时在大画布上开销可观——碰撞检测走的是空间网格加速grid.queryCircle见 Collider.ts把两两比较降为邻域查询但每对相交粒子还要执行一次完整的物理求解bounce 含动能计算与修正粒子越密、画布越大相交对数越多帧成本自然上升。建议控制number.value或density必要时缩小粒子半径降低相交概率。mode: destroy不配合 emitter 会快速耗尽粒子——destroy 每次碰撞必销毁一方较小半径者粒子总数单调下降对照 collisionsDestroy.ts 示例官方解法就是叠加emitters与poisson持续补员。overlap.enable: false且retries偏低时拥挤场景仍可能偶发重叠/异常——从 OverlapPluginInstance.ts 可见超过 retries 后是抛错终止拥挤画布中合法点位本就稀少调大retries或放宽overlap.enable: true是更稳的取舍。5. 实践建议与可参考的仓库资源只想做物理弹跳背景collisions: { enable: true }即可mode 默认 bounce参考 collisionsBounce.ts想压低弹速上限时用maxSpeed支持区间值。做街机/爆炸类特效mode: destroydestroy.mode: split emitter 补员 poisson分布参考 collisionsDestroy.ts需要主角粒子不消失时用unbreakable。做吞噬/成长类特效mode: absorbabsorb.speed默认 2示例中用 5 低move.speed参考 collisionsAbsorb.ts。调试提示两种不同mode的粒子互不碰撞Collider.ts 中 mode 不一致直接跳过z 深度差超过两半径之和的粒子对同样不参与碰撞。6. 相关文档与模块路径粒子根选项Particles.md移动与反弹行为Move.md、Bounce.md选项总入口Options.md碰撞交互包源码Collider.ts、ResolveCollision.ts、OverlapPluginInstance.ts官方内置示例配置utils/configs/src/c/ 目录下的collisionsBounce.ts/collisionsDestroy.ts/collisionsAbsorb.ts【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考