上篇文章简介了XR-Frame框架下

如何进行点击场景中进行交互https://blog.csdn.net/weixin_39318421/article/details/137097113?spm=1011.2415.3001.5331

本篇文章，我们讲解xr-frame中的粒子系统。

粒子系统可以以非常低的系统消耗来模拟雨雪天气等物理效果。

上面这个粒子场景，模拟了向下坠落的粒子碰撞到石柱后分散开的物理效果.

这是一个模拟效果，并不是真正开启了物理碰撞，物理碰撞在小程序中消耗会比较大，容易造成卡顿。

场景中其实是用了3组粒子。

第一组实现向下坠落。

第二组通过粒子的球形发射器实现了球形分散的效果，

第三组采用粒子的锥形发射器实现了分散发射的效果。

一：源码分析

xr-frame框架中粒子的标签采用<xr-particle>，然后通过给标签设置属性来改变粒子的效果

（1）首先我们加载一个材质，作为呈现粒子的图片

<xr-asset-load type="texture" asset-id="point" src="/static/point.png" />

（2）第一组粒子

<xr-particle
	        capacity="500" emit-rate="50" gravity="3"
	        size="0.08 0.08" life-time="1 1" speed="0.04 0.1"
	        start-color="1 1 1 1" start-color2="0.2 0.4 0.6 1" end-color="0.2 0.4 0.6 1"
	        emitter-type="BoxShape"
		emitter-position="0 3 0"
	        emitter-props="minEmitBox:-0.5 0 0.5,maxEmitBox:0.5 0.2 0,direction:0 0 -1,direction2:0 0 -1"
	        texture="point"
	      />

这一组粒子采用箱型发射器BoxShape，

gravity 属性表示y轴上的重力，

start-color 表示粒子的颜色，这里设置了两个颜色，实现粒子的随机变色，

end-color 表示粒子消逝的时候的颜色。

（3）第二组粒子

<xr-particle
		    capacity="500" emit-rate="70" gravity="2"
		    size="0.08 0.08" life-time="1 1" speed="0.04 0.1"
		    start-color="1 1 1 1" start-color2="0.2 0.4 0.6 1" end-color="0.2 0.4 0.6 1"
		    emitter-type="SphereShape"
			emitter-position="0 -0.7 0"
		    emitter-props="radius:1.2,randomizeDirection:0.5"
		    texture="point"
		    />

这组粒子采用球形发射器SphereShape,实现了球形发射粒子的效果

emitter-props 中的属性代表了发射器的一些参数:

radius代表粒子随机生成球型区域的半径；

randomizeDirection 代表粒子发射方向的扰动程度

具体的效果可以通过设置不同的参数预览。

(4)第三组粒子

<xr-particle
		    capacity="500" emit-rate="50" gravity="-2"
			rotation="0 0 180"
		    size="0.08 0.08" life-time="1 1" speed="0.04 0.1"
		    start-color="1 1 1 1" start-color2="0.2 0.4 0.6 1" end-color="0.2 0.4 0.6 1"
		    emitter-type="ConeShape"
			emitter-position="0 -1 0"
		    emitter-props="radius:2,randomizeDirection:0.5"
		    texture="point"
		    />

这组粒子采用锥形发射器ConeShape，这种发射器可以实现类似于手电光线照射时的颗粒效果。

其发射器的参数含义与球形粒子差不多。详细的说明大家可以查看微信小程序开发文档。

二：粒子属性说明

下面这个表格是对粒子中各个属性的简要说明，可以通过配置这些属性实现想要的粒子效果

名称	类型	备注	默认值	用例
angle	number[]	粒子的起始角度,"最小值 最大值(可选)"	[0, 0]	angle="0 0"
angular-speed	number[]	每秒钟粒子旋转的角度(单位:角度)	[0, 0]	angular-speed="0 0"
atlas	Atlas	描绘粒子形态的纹理图集		atlas="particle-atlas"
atlas-frames	string[]	指定纹理图集中的特定帧，以帧名的形式		atlas-frames="snow star"
atlas-loop	boolean	决定纹理图集播放到最后一帧时是否循环	true	atlas-loop="false"
atlas-random	boolean	粒子的初始形态是否从纹理集中随机选择	false	atlas-random="true"
atlas-speed	number	粒子纹理的变化速度	1	atlas-speed="2"
burst-count	number	粒子一次性喷射的粒子数量, 大于-1生效	-1	burst-count="5"
capacity	number	容许同时存在的最多粒子数量	1	capacity="5"
delay	number	延时启动粒子的秒数	0	delay="3"
emit-rate	number	每秒钟允许生成的最多粒子数量	10	emit-rate="5"
emitter-type	string	粒子发射器的类型	"PointShape"	emitter-type="SphereShape"
emitter-props	map	粒子发射器的属性, 搭配发射器类型使用	""	emitter-props="radius:1.5"
emitter-position	number[]	粒子发射器的位置	(0, 0, 0)	emitter-position="2 0 0"
end-color	number[]	粒子生命周期结束时的颜色	[1, 1, 0, 1]	end-color="1 1 0 1"
gravity	number	粒子在y轴上每秒的运动距离	0	gravity="9.8"
life-time	number[]	粒子的生命周期时长区间,"最小值 最大值(可选)"	[1, 1]	lifeTime="1 3"
render-mode	string	粒子的渲染模式, 详见billboard模式介绍	“default"	render-mode="stretched"
size	number[]	粒子的大小,"最小值 最大值(可选)"	[0.3, 0.3]	size="1"
speed	number[]	粒子的速度大小,"最小值 最大值(可选)"	[1, 1]	speed="1 1"
start-color	number[]	粒子初始颜色左区间	[1, 0, 0, 1]	start-color="1 0 0 1"
start-color2	number[]	粒子初始颜色右区间		start-color2="1 1 0 1"
stop-duration	number	粒子存在的总时长(单位：秒), 0表示永远存在	0	stop-duration="3"
texture	string	描绘粒子形态的基本纹理		texture="particle-texture"
mesh	string	以特定网格形态渲染粒子		mesh="cube"
use-noise	boolean	是否对粒子运动轨迹启用噪声	false	use-noise="true"
noise-texture	string	采样的噪声纹理名(可选), 内置柏林噪声		noise-texture="noiseTexture"
noise-strength	number[]	不同轴向上施加噪声干涉运动的力度(可选)	[1, 1, 1]	noise-strength="2 1 1"

三.附件说明

附件中的代码就是本篇文章用到的模型点击交互识别的xr-frame组件中的代码。

大家可以参考学习，如果不会配置需要查看一下这篇文章，xr-frame基础环境搭建。

四.示例小程序

下面这个小程序，是我根据官方指南做的一个简易的示例程序，其中运用了场景的搭建，材质动态修改，模型动态添加与删除，粒子特效等功能，可以作为本片文章的参考。