Babylongjs-粒子系统和鼠标指针事件

使用粒子系统，利用一个喷泉来展示，

构建喷泉主体建筑

首先需要一个创建一个喷泉形状的网格，可以利用MeshBuilder的CreateLathe方法来构建：
 

const fountainProfile = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(10, 0, 0),
    new BABYLON.Vector3(10, 4, 0),
    new BABYLON.Vector3(8, 4, 0),
    new BABYLON.Vector3(8, 1, 0),
    new BABYLON.Vector3(1, 2, 0),
    new BABYLON.Vector3(1, 15, 0),
    new BABYLON.Vector3(3, 17, 0)
];


const fountain = BABYLON.MeshBuilder.CreateLathe("fountain", {shape: fountainProfile, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);

网格设置为双面，因为内部是可见的，因为顶部的斜率和空心的中间。

粒子系统

粒子是在集群或云中发射的小精灵，用于模拟火、烟、水甚至仙尘。

粒子云的基础是ParticleSystem。有了这个，我们指定要使用的粒子数。

粒子从特定定义的区域发射。每个粒子都有一个生命周期，当达到它时，它会被重复使用并重新发射。

它们被赋予一种纹理，这显然决定了它们的外观，基本发射器区域是一个围绕指定点的给定尺寸的盒子；

最多可以为红色、绿色、蓝色和 alpha 以 (r, g, b, a) 的形式给出三种颜色。

Alpha 从 0 表示完全透明到 1 表示完全不透明。

前两个组合或混合以设置粒子的颜色。可以指定混合方法。

第三个具有属性colorDead并且在将粒子回收设置为关闭时使用。我们的喷泉不需要这第三个属性。

粒子的大小及其寿命在最小值和最大值设定的范围内。

const particleSystem = new BABYLON.ParticleSystem("particles", 5000, scene);  //scene is optional
particleSystem.particleTexture = new BABYLON.Texture("url to image", scene);

//设置粒子发射器的位置
particleSystem.emitter = new BABYLON.Vector3(-4, 0.8, -6); 
//设置粒子发射器的大小
particleSystem.minEmitBox = new BABYLON.Vector3(-0.01, 0, -0.01); // minimum box dimensions
particleSystem.maxEmitBox = new BABYLON.Vector3(0.01, 0, 0.01); // maximum box dimensions


//设置粒子的颜色
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);

//设置粒子的混合模式
//共两个模式BABYLON.ParticleSystem.BLENDMODE_ONEONE  //BLENDMODE_STANDARD
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

等于粒子的设置包含如下选项：

粒子的大小及其寿命在最小值和最大值设定的范围内。

每秒发射的粒子数，长寿命的发射率太快会导致粒子发射出现间隙。

我们还为粒子设置了两个可能的方向，并通过给出最小和最大功率值以及更新速度来影响粒子行进的速度。

在 y 分量中为 graving 设置负值可确保粒子向下落。

//设置大小和时间
particleSystem.minSize = 0.01;
particleSystem.maxSize = 0.05;

particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;

//发射速率，N/单位时间秒
particleSystem.emitRate = 1500;

//设置粒子喷射的方向
particleSystem.direction1 = new BABYLON.Vector3(-1, 8, 1);
particleSystem.direction2 = new BABYLON.Vector3(1, 8, -1);

//设置最小速度和最大速度 和更新速度
particleSystem.minEmitPower = 0.2;
particleSystem.maxEmitPower = 0.6;

//数值越大，更新越快。  更新速度和这个值的大小成反比
particleSystem.updateSpeed = 0.01;

终于， 可以开始喷水了：

particleSystem.start();

但如果我们想和喷泉交互呢？

鼠标指针事件：

当我们点击喷泉上的屏幕指针时，我们希望它开始。我们通过向onPointerObservable添加一个函数来处理指针向下事件，该事件在停止和启动之间切换粒子系统。

let switched = false;  //on off flag
//监听鼠标按下的事件
scene.onPointerObservable.add((pointerInfo) => {            
    switch (pointerInfo.type) {
        case BABYLON.PointerEventTypes.POINTERDOWN:
            if(pointerInfo.pickInfo.hit) {
                pointerDown(pointerInfo.pickInfo.pickedMesh)
            }
        break;
    }
});


//当鼠标被按下后， 后调粒子系统开启和关闭
const pointerDown = (mesh) => {
    if (mesh === fountain) { //check that the picked mesh is the fountain
        switched = !switched;  //toggle switch
        if(switched) {
            particleSystem.start();
        }
        else {
            particleSystem.stop();
        }
    }
}