点击这里申请百度智能云特邀VIP帐号，立即体验AR开放平台>>>

百度智能云AR开放平台使用指南-AR场景开发粒子

粒子

粒子系统作为渲染引擎中非常重要的一个系统，主要用于模拟一些特定的效果现象的技术，而这些现象用其它传统的渲染技术难以实现真实感的效果，经常使用粒子系统模拟的现象有火、爆炸、烟、水流、水花、落叶、云、雾、雪、尘、流星尾迹或者像发光轨迹这样的抽象视觉效果等。以下粒子效果均是基于当前引擎能力实现，相关代码下载请见下方 示例代码 。

要实现上述粒子效果，需要在json里配置相应的粒子系统文件，并在lua文件里控制粒子发射或者粒子相关参数的修改。

粒子制作准备

粒子的渲染材料通常为一张 N*N 的jpg或者png的纹理图片，发射的粒子会以该图片中的元素为基础进行渲染。

以樱花项目为例，该项目用到了三张粒子素材，素材图片统一放在res/texture文件下。

1、第一张素材图是4*4、有着不同花朵样式的图片，通过在json和lua中修改粒子参数及发射时间等，在视频中产生点击屏幕出现花瓣片的效果。

示例case中名称为flower.png：

2、第二张素材图是3*4、有着不同形态花瓣的图片，在视频中产生的效果是从上方飘落。

示例case中名称为yinhua3.png：

3、第三张素材图是张1*1的花瓣片图，在视频中产生的效果为点击屏幕后花朵周围会出现一圈花瓣片。

示例case中名称为yinhuapian.png：

粒子系统在场景中的配置

    {
             "name": "yinhua1",
             "type": "particle",    //粒子类型节点
             "visible": 1,
             "touchable": 0,
             "particleSystemSuppl": {
             "particlePath": "res/particle-yinhua.json"   //粒子系统对应配置文件
             },
             "position": "0, 0, 0",
             "scale": "1, 1, 1",
             "rotation": "0, 0, 0",
             "children": []
    },
    {
             "name": "yinhua2",
             "type": "particle",
             "visible": 1,
             "touchable": 0,
             "particleSystemSuppl": {
             "particlePath": "res/particle-yinhua2.json"
             },
             "position": "0, 0, 0",
             "scale": "1, 1, 1",
             "rotation": "0, 0, 0",
             "children": []
     },
     {
             
             "name": "yinhua3",
             "type": "particle",
             "visible": 1,
             "touchable": 0,
             "particleSystemSuppl": {
             "particlePath": "res/particle-yinhua3.json"
             },
             "position": "0, 0, 0",
             "scale": "1, 1, 1",
             "rotation": "0, 0, 0",
             "children": []
      },

说明：

• 樱花case中引入了三个粒子文件，particle-yinhua.json、particle-yinhua2.json、particle-yinhua3.json，这三个粒子文件即具体粒子参数的含义在粒子API一节中有详解。

• yinhua1、yinhua2、yinhua3为三个粒子系统的节点名，在lua里可直接对这三个节点进行操作，即为对粒子系统进行操作。

例如

 app.on_loading_finish = function()
   scene.yinhua3.particle.emit_status = 1
 end

在进入Case时，发射yinhua3节点配置的粒子文件。

应用

下面配置particle-yinhua.json、particle-yinhua2.json和particle-yinhua3.json三个粒子文件。

从上而下飘洒樱花

particle-yinhua.json文件定义了樱花从上而下飘落。
效果：

   {
     "name": "yinhua",
     "particleCountMax":1000,
     "material": {
        "blendMode":"alpha",
        "textureName":"yinhua3.png",
        "frameLoop":1,
        "frameCount":12,
        "frameColums":3,
        "frameRows":4,
        "frameRandomOffset":12,
        "frameDuration":100
       },
  "emission":{
    "emissionLoop":-1,
    "emissionRate":200,
    "emissionDuration":3000,
    "emitterPosition":"500, 0, 2500",
    "emissionVelocityMode":"axis",
    "emissionAccelecationMode":"axis",
    "emitterShape":"box",
    "emitterShapeStrectchScale":"1,1,1",
    "emitterShapeParam":{
                        "box":{
                            "boxLengthX":1500,
                            "boxLengthY":1500,
                            "boxLengthZ":10
                        }
                    }


 },
"particle":{
   "lifeTimeMin":3000,
   "lifeTimeMax":6000,
   "sizeStartMin":60,
   "sizeStartMax":60,
   "sizeEndMin":40,
   "sizeEndMax":40,
   "colorStart":"255, 255, 255, 255",
   "colorEnd":"255, 255, 255, 255",
   "velocity":"-120, 0, -350",
   "velocityVar":"70, 100, 100",
   "spinAngleMin":30,
   "spinAngleMax":120
   }
}

• "emitterPosition":"500, 0, 2500"定义了发射器的位置，屏幕中心为（0，0，0），（500，0，2500）表示发射器在右上方。

• "emitterShape":"box"字段定义了发射器的形状，是一个长方体，"emitterShapeParam"字段定义了长方体发射器的长宽高。

• "velocity":"-120, 0, -350"字段定义了粒子的速度，粒子x轴及z轴的负方向都产生了一个速度。

因此樱花会从右上方向左下方运动，且发射器的范围比较大，粒子在这个空间范围内飘落不会显得特别多。

• yinhua3.png如粒子制作准备中所示是一张3*4的贴图，对应设置行为"frameColums":3，列为"frameRows":4；"frameLoop":1， "frameRandomOffset":12，设置了播放序列帧，且粒子初始发射时会从图里的12个樱花样式里随机选出一种发射。

点击屏幕出现樱花

particle-yinhua2.json文件定义了点击屏幕时出现的樱花样式。
效果：

 {
  "name": "kongmingdeng",
  "particleCountMax":1000,
  "material": {
     "blendMode":"alpha",
     "textureName":"flower.png",
     "frameAnimated":0,
     "frameLoop":1,
     "frameCount":4,
     "frameColums":2,
     "frameRows":2,
     "frameRandomOffset":4,
     "frameDuration":100
     },
  "emission":{
     "emissionLoop":-1,
     "emissionRate":100,
     "emissionDuration":3000,
     "emitterRotationAxisAngleMin":2,
     "emitterRotationAxisAngleMax":180,
     "emitterRotationAxisVar":"1, 1, 1",
     "emissionVelocityMode":"axis",
     "emissionAccelecationMode":"axis",
     "emitterShape":"box",
     "emitterShapeStrectchScale":"1,1,1",
  "emitterShapeParam":{
                        "box":{
                            "boxLengthX":100,
                            "boxLengthY":100,
                            "boxLengthZ":100
                        }
                    }
                   },
 "particle":{
    "lifeTimeMin":2000,
    "lifeTimeMax":3000,
    "sizeStartMin":80,
    "sizeStartMax":80,
    "sizeEndMin":80,
    "sizeEndMax":80,
    "colorStart":"255, 255, 255, 255",
    "colorEnd":"255, 255, 255, 0",
    "velocityVar":"100, 100, 100",
    "spinAngleMin":30,
    "spinAngleMax":120,
    "rotationAxisAngleMin":0,
    "rotationAxisAngleMax":0
    },

 }

• "emitterRotationAxisAngleMin":2，设置了发射器绕轴旋转角度的最小值，"emitterRotationAxisAngleMax":180，设置了发射器绕轴旋转角度的最大值，发射器会绕z轴在2~180度来回旋转。

• "velocityVar":"100, 100, 100"，设置了初始粒子速度范围。

• "lifeTimeMin":2000，设置了粒子的最小生存时间，"lifeTimeMax":3000，设置了粒子的最大生存时间，发射的粒子在2s~3s范围内会消失。

• "colorStart":"255, 255, 255, 255"，设置了初始粒子颜色，"colorEnd":"255, 255, 255, 0"，设置了粒子消失前的颜色，会逐渐透明直至消失。

• "spinAngleMin":30，设置了粒子的最小旋转角度，"spinAngleMax":120,设置了粒子的最大旋转角度，粒子自身会在30度~120度之间来回旋转。

因此点击屏幕后出现的粒子效果为花朵粒子会有一个速度朝着x轴、y轴以及z轴扩散直至消失。

• flower.png如粒子制作准备中所示是一张2*2的贴图，对应设置行为"frameColums":2，列为"frameRows":2；"frameLoop":1， "frameRandomOffset":4，设置了播放序列帧，且粒子初始发射时会从图里的4个花朵样式里随机选出一种发射。

花瓣片以圆圈形式出现

particle-yinhua3.json文件定义了花瓣片以圆环的形式扩散至消失。
效果：

  {
    "name": "kongmingdeng",
    "particleCountMax":300,
    "material": {
        "blendMode":"alpha",
        "textureName":"yinhuapian.png",
        "frameLoop":1,
        "frameCount":1,
        "frameColums":1,
        "frameRows":1,
        "frameRandomOffset":0,
        "frameDuration":100
        },
   "emission":{
       "emissionLoop":-1,
       "emissionRate":500,
       "emissionDuration":100,
       "emissionIdleDuration":2500,
       "emitterRotationAxisAngleMax":179,
       "emitterRotationAxisVar":"1, 1, 1",
       "emissionVelocityMode":"shape",
       "emissionAccelecationMode":"shape",
       "emitterShape":"circle",
       "emitterShapeStrectchScale":"1,1,1",
       "emitterShapeParam":{
                        "circle":{
                            "circleOutRadius":50,
                            "circleInRadius":49
                        }
                    }
           },
   "particle":{
       "lifeTimeMin":3000,
       "lifeTimeMax":3000,
       "sizeStartMin":50,
       "sizeStartMax":50,
       "sizeEndMin":50,
       "sizeEndMax":50,
       "colorStart":"255, 255, 255, 255",
       "colorEnd":"255, 255, 255, 0",
       "velocity":"0, 500, 0",
       "spinAngleMin":30,
       "spinAngleMax":120
        },
      }

• "emitterShape":"circle"，发射器的形状为圆环；"circleOutRadius":200，设置了圆环发射器的外圆半径；"circleInRadius":150，设置了圆环发射器的内圆半径 ；因此粒子发射的时候会从内圆向外圆发射。

• "velocity":"0, 500, 0"，设置了粒子的速度，沿y轴方向有一个速度，所以向y轴扩散的速度会比较快。

• yinhuapian.png如粒子制作准备中所示是一张1*1的贴图，对应设置行为"frameColums":1，列为"frameRows":1。

粒子系统在手势交互中的应用

手指接触屏幕出现粒子还需要在Lua里进行相关配置，通过on_touch_event接口开发者可以拿到发生在屏幕上的交互信息的坐标以及状态，已知坐标以及状态可以组合实现多种粒子效果，要拿到这些信息首先我们需要注册手势回调的函数来监控在屏幕上发生的交互。

代码示例：

推荐：TOP云智能建站优惠活动，仅880元即可搭建一个后台管理五端合一的智能网站（PC网站、手机网站、百度智能小程序、微信小程序、支付宝小程序），独享百度搜索SEO优势资源，让你的网站不仅有颜值有排面，更有排名，可以实实在在为您带来效益，请点击进入TOP云智能建站>>>，或咨询在线客服了解详情。