展示特效

实现步骤

分别实现模型正常的状态和粒子状态
实现模型从实体转换成粒子
粒子散开的动画

实现粒子状态和模型导入

首先用BJS提供的模型导入的方法导入模型，这个没什么好说的

 SceneLoader.ImportMesh("", "/models/", "seagulf.glb", scene, (meshes) => {
     //todo:
 }）

然后需要实现模型的粒子状态，通过Babylonjs提供的模型转粒子的方法，参考这个demo

      let pcs: PointsCloudSystem;

      SceneLoader.ImportMesh("", "/models/", "seagulf.glb", scene, (meshes) => {
            pcs = new PointsCloudSystem("pcs", 2, scene);
            model = meshes[0] as Mesh;
            model.position.x = -100;
            pcs.addSurfacePoints(meshes[1] as Mesh, 50000, PointColor.Color, 0);
            pcs.buildMeshAsync()
            //模型渲染层级高于粒子，用于遮盖粒子
            // meshes[1].renderingGroupId = 1;
            
      });

到这里，应该可以看到场景里面存在粒子，也能看到模型。这里偷个懒，让模型和粒子同时存在，

meshes[1].renderingGroupId = 1; 用这个把实体覆盖在粒子上面，可能会存在性能问题，比较好的做法应该是根据消失的模型动态展示出粒子。这里先不管这个。

模型渐变消失

模型需要从某个方向逐渐消失，第一反应应该是用一个裁剪平面让模型从某个方向开始裁剪。Babylonjs提供裁剪功能，详细的可以看这个文档

创建模型的裁剪面

   //xz裁剪面
   const plane = new Plane(0, 1, 0, -800);
   //裁剪面赋值给实体材质
    meshes[1].material!.clipPlane = plane;
    
    // 裁剪面动态下移，实体从上到下消失的效果
     scene.onBeforeRenderObservable.add(() => {
        if (plane.d >= 800) {
          if (model) {
            model.setEnabled(false);
          }
          isReady = true;
        }
        else {
          plane.d += 5;
        }
      });

到这以及实现实体转变成粒子的动画了

粒子消散

实现这个效果，只要让粒子按某个规律运动就行了

      pcs.updateParticle = function (particle) {
          if (isReady) {
            particle.velocity.addInPlace(new Vector3(Scalar.RandomRange(0, 2), Scalar.RandomRange(0, 2), Scalar.RandomRange(0, 2)));
            particle.position.addInPlace(new Vector3(Scalar.RandomRange(0, 100), 2, Scalar.RandomRange(0, 100)));
          }
        };

这里让粒子随机的都往z方向运动

到这，就实现文章开头的效果

总结

这篇文章利用Babylonjs 的裁剪面，从模型获取粒子，以及粒子更新的功能，实现模型到粒子，在逐渐消失的功能。附上代码地址

Babylonjs GLTF模型消散特效

展示特效

实现步骤

实现粒子状态和模型导入

模型渐变消失

粒子消散

总结