跳到主要内容

<pc-particle-system>

<pc-particle-system> 添加粒子发射器，可实现雪花、火花或烟雾，由 JSON 资源配置。

用法

属性​

属性类型默认值说明
asset资源 ID-定义粒子配置的 JSON 资源
enabledBoolean（布尔）"true"组件启用状态

配置​

JSON 使用与引擎 ParticleSystemComponent 相同的属性名。向量写为数字数组，随生命周期变化的值写为曲线对象，keys 交替存放时间和值，即 [time, value, time, value, ...]；向量曲线为每轴一个此类数组。

colorMapAsset 通过 id 引用 <pc-asset>，元素会解析成纹理。这是唯一支持此类解析的资源字段，normalMapAsset、meshAsset 和 renderAsset 采用同样写法不会解析。

配置资源可为 lazy，运行时修改 asset 可切换配置。数据到达后，会按引擎规则构造向量和曲线，应用全部设置。但配置中的 enabled 被忽略，是否运行由元素 enabled 决定。

示例​

先以 JSON 定义粒子系统：

snow.json
{
    "numParticles": 100,
    "lifetime": 10,
    "rate": 0.1,
    "colorMapAsset": "snowflake",
    "emitterExtents": [ 15, 0, 10 ],
    "startAngle": 360,
    "startAngle2": -360,
    "alphaGraph": {
        "keys": [ 0, 0, 0.5, 0.5, 0.9, 0.9, 1, 0 ]
    },
    "rotationSpeedGraph": {
        "keys": [ 0, 100 ]
    },
    "rotationSpeedGraph2": {
        "keys": [ 0, -100 ]
    },
    "scaleGraph": {
        "keys": [ 0, 0.1 ]
    },
    "velocityGraph": {
        "keys": [
            [ 0, 0 ],
            [ 0, -0.7 ],
            [ 0, 0 ]
        ]
    },
    "velocityGraph2": {
        "keys": [
            [ 0, 0 ],
            [ 0, -0.4 ],
            [ 0, 0 ]
        ]
    }
}

再通过 HTML 添加到场景，运行上面的 snow.json，colorMapAsset 引用 snowflake 纹理 id：

实时示例
<pc-app>
    <pc-asset src="https://developer.playcanvas.com/assets/snowflake.png" id="snowflake"></pc-asset>
    <pc-asset src="https://developer.playcanvas.com/assets/snow.json" id="snow"></pc-asset>
    <pc-scene>
        <pc-entity name="camera" position="0 0 8">
            <pc-camera clear-color="#1d1f2b"></pc-camera>
        </pc-entity>
        <pc-entity name="snow" position="0 5 0">
            <pc-particle-system asset="snow"></pc-particle-system>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScript 接口​

可以通过 ParticleSystemComponentElement API创建和操作元素。

component 是底层 ParticleSystemComponent，就绪前为 null，其余功能可从这里访问。元素还提供 play()、pause()、reset() 和 stop()。

另请参阅​

示例：基础粒子和钟楼。