分类： 组件

微信小程序框架内置了一些环境数据资源。

基于不同渲染模式的渲染

RenderMode不进行设置的前提下，无论相机如何转动，所有粒子永远正对着屏幕。

这里通过render-mode字段进行控制，示例如下：

<xr-particle id="colorGradient" position="2 0 -2" render-mode="off" capacity="20" emit-rate="5" life-time="3" emitter-type="BoxShape"></xr-particle>

渲染模式字段相关变量介绍

可以通过代码调用禁用公告板渲染，粒子将保持它自己的位置，面片的显示不会随着相机旋转而进行调整：

  particleComponent.useBillBoard = false

要设定公告板模式，首先要启用useBillBoard，并对billboardMode进行设置，这里以”BILLBOARDMODE_Y”为例：

  particleComponent.useBillBoard = true
  particleComponent.billboardMode = BillBoardMode.BILLBOARDMODE_Y || 1

支持色彩取样构建

粒子系统目前支持基于alpha值，在色彩梯度渐变图上进行采样，从而更改粒子的颜色。要启用此功能，首先将useRampGradients置为true。

通过如下示例，构建自定义色彩取样表：

  particleComponent.useRampGradient = true;
  particleComponent.addRampGradient(0.0, Vector3.createFromNumber(1, 1, 1));
  particleComponent.addRampGradient(0.2, Vector3.createFromNumber(0.8, 0.8, 0.05));
  particleComponent.addRampGradient(0.4, Vector3.createFromNumber(0.86, 0.5, 0.05));
  particleComponent.addRampGradient(0.6, Vector3.createFromNumber(0.75, 0.18, 0.07));
  particleComponent.addRampGradient(0.8, Vector3.createFromNumber(0.45, 0.08, 0.06));
  particleComponent.addRampGradient(1, Vector3.createFromNumber(0.05, 0.05, 0.05));

最终粒子将根据自身alpha值，在取样表中采取对应的色彩。

通过如下示例，也可以在生命周期的不同阶段，指定alpha值的变化范围，影响对色彩渐变图的采样。

例如：0.2秒时，因为此时的采样范围为[0.1, 0.8]，粒子alpha值小于等于0.1时视为0，当大于等于0.8时视为1，在区间内值映射为(alpha-0.1)/0.8。

  particleComponent.addColorRemapGradient(0, 0, 0.1);
  particleComponent.addColorRemapGradient(0.2, 0.1, 0.8);
  particleComponent.addColorRemapGradient(0.3, 0.2, 0.85);

相关方法

addRampGradient

addColorRemapGradient

粒子属性的动态变化

粒子在运动过程中，可以定制对其大小、颜色、速度的动态变化。

本粒子系统同时内置有关粒子大小的控制方法addSizeGradient，用法如下：

  particleComponent.addSizeGradient(0,1);
  particleComponent.addSizeGradient(0.5,0.8);
  particleComponent.addSizeGradient(0.75,0.3,0.5);
  particleComponent.addSizeGradient(1,0);

调用addColorGradient支持带有alpha通道的颜色过渡：

    particleComponent.addColorGradient(0, Vector4.createFromNumber(1,1,1,0));
    particleComponent.addColorGradient(0.3, Vector4.createFromNumber(0.3,1,1,0.5),Vector4.createFromNumber(0.2,0,0.6,0.5),);
    particleComponent.addColorGradient(1, Vector4.createFromNumber(0,1,1,1));

调用addAlphaGradient可以专门调整透明度的过渡：

    particleComponent.addAlphaGradient(0,0);
    particleComponent.addAlphaGradient(0.3,0.3, 0.5);
    particleComponent.addAlphaGradient(1,1);

调用addSpeedScaleGradient动态改变粒子运动过程中的速度大小：

    particleComponent.addSpeedScaleGradient(0,0);
    particleComponent.addSpeedScaleGradient(0.3,0.5, 1);
    particleComponent.addSpeedScaleGradient(1,2);

相关方法

addSizeGradient

其中gradient统一取值范围为[0,1]间，表示相对粒子生命周期的占比，如0.1，即指定粒子在0.1 * lifeTime的时刻；sizeScale与sizeScale2值的大小为相对于粒子系统属性中scale配置的值，如sizeScale为2，则粒子体积大小为size * 2。

addColorGradient

addAlphaGradient

addSpeedScaleGradient

gradient number 指定所处粒子生命周期的阶段 speedScale number 指定粒子速度的左区间 speedScale2 number 指定粒子速度的右区间[可选]

    <xr-asset-load type="atlas" asset-id="particle-atlas" src="/path/to/atlas.json" />
    <xr-particle capacity="100" size="2" emit-rate="12" life-time="4" angle="0 360" atlas="particle-atlas" atlas-frames="frame-name" atlas-speed="4" atlas-random="true" atlas-loop="true"></xr-particle>

 <xr-asset-load type="texture" asset-id="particlePoint" src="xxx" /> <!-- xxx为纹理的url -->

   var myData ={}
    myData = {
      "capacity": 10,
      "emitRate": 5,
      "size":[0.1],
      "startColor":[1,1,0,1],
      "endColor":[1,1,0,1],
      "emitterType":"SphereShape",
      "emitterProps": [["radius","0.1"]],
      "stopDuration":3,
      "lifeTime":[3],
      "texture":"particlePoint", // xxx为纹理的url
      "speed":[0.5],
    }
    const particleSystemElement = xrScene.getElementById("xxxx"); // xxx为粒子系统的id命名
    tempSystem = particleSystemElement.getComponent(xrFrameSystem.Particle)
    var subEmitter = this.createSubEmitter(myData)
    subEmitter.state = 0
    //可以规定多个子发射器的阵列
    particleComponent.subEmitters = [subEmitter]