uniApp使用XR-Frame创建3D场景(8)粒子系统

Ltanke2024-03-29 9:02

上篇文章讲述了如何将XR-Frame作为子组件集成到uniApp中使用

本片我们详细讲解一下xr-frame的粒子系统

先看源码

XML 复制代码

<xr-scene render-system="alpha:true" bind:ready="handleReady">
<xr-node visible="{{sec8}}">
    <xr-asset-load type="texture" asset-id="point" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/particles/point.png" />
    <xr-particle
        capacity="500" emit-rate="20"
        size="0.03 0.06" life-time="2 3" speed="0.04 0.1"
        start-color="1 1 1 0.8" end-color="1 1 1 0.2"
        emitter-type="BoxShape"
        emitter-props="minEmitBox:-0.5 0 0.5,maxEmitBox:0.5 0.2 0,direction:0 0 -1,direction2:0 0 -1"
        texture="point"
    />
  </xr-node>
  <xr-camera id="camera"  clear-color="0 0 0 0" position="1 1 2" target="gltf-model" camera-orbit-control/>
</xr-scene>

1.加载粒子的图片资源

通过**<xr-asset-load>**加载粒子图片

2.通过<xr-particle>标签将粒子添加到场景中

下面是一些常用的属性

capacity：粒子同时出现的最大数量

emit-rate：每秒钟允许生成的最多粒子数量

size：粒子的最小值和最大值

emitter-type：粒子发射器的类型

texture：粒子采用的纹理贴图

3.在小程序开发者工具中查看

这里给大家推荐一个微信小程序 3D模型素材库，这个小程序中的模型都是针对小程序优化后的glb格式文件，体积小，加载快，非常适合小程序使用