BabylonJS - 动画

动画使场景更具互动性，也使其令人印象深刻，赋予其逼真的外观。现在让我们详细了解动画。我们将在形状上应用动画，将其从一个位置移动到另一个位置。要使用动画，您需要使用所需的参数在动画上创建一个对象。

现在让我们看看相同的语法 −

var animationBox = new BABYLON.Animation(
   "myAnimation", 
   "scaling.x", 
   30, 
   BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
   BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

参数

考虑以下与 BabylonJS 动画相关的参数 −

动画的名称。
形状的属性 - 例如，缩放、更改位置等。缩放是语法中显示的内容;在这里，它将沿 x 轴缩放框。
请求的每秒帧数:此动画中可能的最高 FPS。
在这里，您可以决定并输入要修改的值类型:是浮点数(例如平移)、矢量(例如方向)还是四元数。
确切值为 −

BABYLON.Animation.ANIMATIONTYPE_FLOAT
BABYLON.Animation.ANIMATIONTYPE_VECTOR2
BABYLON.Animation.ANIMATIONTYPE_VECTOR3
BABYLON.Animation.ANIMATIONTYPE_QUATERNION
BABYLON.Animation.ANIMATIONTYPE_COLOR3

动画行为 - 停止或再次启动动画。
使用以前的值并增加 −

BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE

从初始值 − 重新开始

BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE

保留其最终值

BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT

现在让我们创建动画对象 −

var animationBox = new BABYLON.Animation(
   "myAnimation", 
   "scaling.x", 
   30, 
   BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
   BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

动画演示

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	
            
            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;
            
            var box = BABYLON.Mesh.CreateBox("box", '3', scene);
            box.position = new BABYLON.Vector3(-10,0,0);

            var box1 = BABYLON.Mesh.CreateBox("box1", '3', scene);
            box1.position = new BABYLON.Vector3(0,0,0);

            var animationBox = new BABYLON.Animation("myAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            var animationBox1 = new BABYLON.Animation("myAnimation1", "scaling.z", 10, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            // 包含所有动画关键点的数组
            var keys = [];
            
            //在动画关键点 0 处，缩放的值为"1"
            keys.push({
            frame: 0,
            value: 1
            });
            
            //在动画关键点 20 处，缩放的值为"0.2"
            keys.push({
            frame: 20,
            value: 0.2
            });
            
            keys.push({
            frame: 60,
            value: 0.4
            });
            
            //在动画关键点 100 处，缩放的值为"1"
            keys.push({
            frame: 100,
            value: 1
            });
            
            animationBox.setKeys(keys);
            box.animations = [];
            box.animations.push(animationBox);
            scene.beginAnimation(box, 0, 100, true);
            
            // 包含所有动画关键点的数组
            var keys = [];
            
            //在动画关键点 0 处，缩放的值为"1"
            keys.push({
            frame: 0,
            value: 1
            });
            
            //在动画关键点 20 处，缩放的值为"0.2"
            keys.push({
            frame: 60,
            value: 0.2
            });
            
            //在动画关键点 100 处，缩放的值为"1"
            keys.push({
               frame: 100,
               value: 1
            });
            animationBox1.setKeys(keys);
            box1.animations = [];
            box1.animations.push(animationBox1);			
            scene.beginAnimation(box1, 0, 100, true); 
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

输出

// 包含所有动画关键点的数组
var keys = [];

//在动画关键点 0 处，缩放的值为"1"
keys.push({
frame: 0,
value: 1
});

//在动画关键点 20 处，缩放的值为"0.2"
keys.push({
frame: 20,
value: 0.2
});

//在动画关键点 100 处，缩放的值为"1"
keys.push({
frame: 100,
value: 1
});

animationBox.setKeys(keys);

box.animations = [];

box.animations.push(animationBox);

scene.beginAnimation(box, 0, 100, true); //定义目标形状框的开始和结束。

以下是动画对象 − 上可用的其他函数

pause()
restart()
stop()
reset()

我们可以将 beginAnimation 引用存储在变量中，并使用该引用停止、暂停或重置动画。

var newAnimation = scene.beginAnimation(box1, 0, 100, true);

例如，

newAnimation.pause();

动画对象上有可用的函数来控制关键帧。

BABYLON.Animation.prototype.floatInterpolateFunction = function (startValue, endValue, gradient) {
   return startValue + (endValue - startValue) * gradient;
};

BABYLON.Animation.prototype.quaternionInterpolateFunction = function (startValue, endValue, gradient) {
   return BABYLON.Quaternion.Slerp(startValue, endValue, gradient);
};

BABYLON.Animation.prototype.vector3InterpolateFunction = function (startValue, endValue, gradient) {
   return BABYLON.Vector3.Lerp(startValue, endValue, gradient);
};

以下是您可以更改的函数列表 −

floatInterpolateFunction
quaternionInterpolateFunction
quaternionInterpolateFunctionWithTangents
vector3InterpolateFunction
vector3InterpolateFunctionWithTangents
vector2InterpolateFunction
vector2InterpolateFunctionWithTangents
sizeInterpolateFunction
color3InterpolateFunction
matrixInterpolateFunction

要创建快速动画，有一个可直接使用的函数。

例如，

Animation.CreateAndStartAnimation = function(name, mesh, tartgetProperty, framePerSecond, totalFrame, from, to, loopMode);

这里您只能使用 2 个关键帧 - start 和 end。

演示

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	
            
            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;
            
            var box = BABYLON.Mesh.CreateBox("box", '3', scene);
            box.position = new BABYLON.Vector3(0,0,0);
            BABYLON.Animation.CreateAndStartAnimation('boxscale', box, 'scaling.x', 30, 120, 1.0, 1.5);  
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

输出

动画混合

您可以借助 enableBlending = true; 实现动画混合

此混合动画将从当前对象状态更改。

缓动函数

为了使动画更加令人印象深刻，我们之前已经在 css 中使用了一些缓动函数。

以下是缓动函数列表 −

BABYLON.CircleEase ()
BABYLON.BackEase (振幅)
BABYLON.BounceEase (反弹，弹性)
BABYLON.CubicEase ()
BABYLON.ElasticEase (振荡，弹性)
BABYLON.ExponentialEase (指数)
BABYLON.PowerEase (幂)
BABYLON.QuadraticEase ()
BABYLON.QuarticEase ()
BABYLON.QuinticEase ()
BABYLON.SineEase ()

演示

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	
            
            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;

            var box1 = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
            box1.position = new BABYLON.Vector3(0,0,0);

            var animationBox1 = new BABYLON.Animation("myAnimation1", "scaling.z", 10, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            // 包含所有动画关键点的数组
            var keys = [];
            
            //在动画关键点 0 处，缩放的值为"1"
            keys.push({
            frame: 0,
            value: 1
            });
            
            //在动画关键点 20 处，缩放的值为"0.2"
            keys.push({
            frame: 60,
            value: 0.2
            });
            
            //在动画关键点 100 处，缩放的值为"1"
            keys.push({
               frame: 100,
               value: 1
            });
            
            animationBox1.setKeys(keys);
            box1.animations = [];
            // box1.animations.push(animationBox1);		

            var easingFunction = new BABYLON.QuarticEase();
            easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);

            animationBox1.setEasingFunction(easingFunction);
            box1.animations.push(animationBox1);
            scene.beginAnimation(box1, 0, 100, true); 
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

输出

动画事件

您可以在动画事件上执行任何必要的操作。如果您想在帧更改或动画完成时更改任何内容，可以通过向动画添加事件来实现。

var event1 = new BABYLON.AnimationEvent(50, function() { console.log("Yeah!"); }, true);
//当使用动画将帧更改为 50 时，您将获得 console.log。

animation.addEvent(event1); //将事件附加到动画。

BabylonJS - Sprites

Sprites 在计算机图形学中指的是什么?它基本上是一个集成到较大场景中的二维位图。当将多个较小的图像组合成单个位图以节省内存时，生成的图像称为精灵表。让我们开始使用精灵以及如何使用它们。

开始使用精灵的第一步是创建精灵管理器。

var spriteManagerTrees = new BABYLON.SpriteManager("treesManagr", "Assets/Palm-arecaceae.png", 2000, 800, scene);

考虑以下参数来创建精灵管理器 −

名称 − 此管理器的名称。
URL −要使用的图像 URL。
管理器的容量 − 此管理器中的最大实例数。例如，上述实例将创建 2000 棵树。
单元格大小 − 图像占用的大小。
scene − 将添加管理器的场景。

var spriteManagerPlayer = new BABYLON.SpriteManager("playerManagr","Assets/Player.png", 2, 64, scene);

查看上面的对象。我们已经给出了一个玩家图像，现在正在创建它的 2 个实例。图像的大小为 64。精灵的每个图像必须包含在 64 像素的正方形中，不多也不少。

现在让我们创建链接到精灵管理器的相同实例。

var player = new BABYLON.Sprite("player", spriteManagerPlayer);

您可以像任何其他形状或网格一样使用此播放器对象。您可以指定位置、大小、角度等。

player.size = 0.3;
player.angle = Math.PI/4;
player.invertU = -1;
player.width = 0.3;
player.height = 0.4;

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            //scene.clearColor = new BABYLON.Color3(0, 1, 0);	
            // Create camera and light
            var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 8, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var spriteManagerTrees = new BABYLON.SpriteManager("trees", "images/tree.png", 1000, 400, scene);	

            for (var i = 0; i < 1000; i++) {
               var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
               tree.position.x = Math.random() * 100 - 50;
               tree.position.z = Math.random() * 100 - 50;
               tree.isPickable = true;

               //Some "dead" trees
               if (Math.round(Math.random() * 5) === 0) {
                  tree.angle = Math.PI * 90 / 180;
                  tree.position.y = -0.3;
               }
            }

            var spriteManagerTrees1 = new BABYLON.SpriteManager("trees1", "images/tree1.png", 1000,400, scene);	

            for (var i = 0; i < 1000; i++) {
               var tree1 = new BABYLON.Sprite("tree1", spriteManagerTrees1);       
               if (i %2 == 0) {
               tree1.position.x = Math.random() * 100 - 50;			
               } else {
                  tree1.position.z = Math.random() * 100 - 50;
               }
               tree1.isPickable = true;
            }

            spriteManagerTrees.isPickable = true;
            spriteManagerTrees1.isPickable = true;

            var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/bird.png", 2, 200, scene);
            
            var player = new BABYLON.Sprite("player", spriteManagerPlayer);
            player.position.x = 2;
            player.position.y = 2;	
            player.position.z = 0;	


            var spriteManagerPlayer1 = new BABYLON.SpriteManager("playerManager1", "images/bird.png", 2, 200, scene);
            
            var player1 = new BABYLON.Sprite("player", spriteManagerPlayer1);
            player1.position.x = 1;
            player1.position.y = 2;	
            player1.position.z = 0;	

            var spriteManagerPlayer2 = new BABYLON.SpriteManager("playerManager2", "images/bird.png", 2, 200, scene);
            
            var player2 = new BABYLON.Sprite("player", spriteManagerPlayer2);
            player2.position.x = 0;
            player2.position.y = 1;	
            player2.position.z = 0;	

            scene.onPointerDown = function (evt) {
               var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
               if (pickResult.hit) {
                  pickResult.pickedSprite.angle += 1;
               }
            };
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

输出

在此演示中，我们使用了名为 tree.png 的图像，tree1.png 用于显示树木，bird.png 用于显示场景中的鸟。这些图像存储在本地 images/ 文件夹中，也粘贴在下面以供参考。您可以下载任何您选择的图像并在演示链接中使用。

Tree 使用的图像如下所示。

images/tree.png

images/tree1.png

images/bird.png

现在让我们再看一个带有 sprites-balloons 的演示。

带有 sprites-balloons 的演示

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height:100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);

            var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", -3.4, 1.0, 82, new BABYLON.Vector3(0, -15, 0), scene);
            camera.setPosition(new BABYLON.Vector3(30, 0,100));
            camera.attachControl(canvas, true);
            
            var spriteManagerTrees = new BABYLON.SpriteManager("trees", "images/balloon.png", 50, 450, scene);	

            var treearray = [];
            for (var i = 0; i < 50; i++) {
               var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
               tree.position.x = Math.random() * 100 - 10;
               tree.position.z = Math.random() * 100 - 10;
               tree.position.y = -35;
               tree.isPickable = true;       
               treearray.push(tree);
            }

            spriteManagerTrees.isPickable = true;
            scene.onPointerDown = function (evt) {
               var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
               if (pickResult.hit) {
                  pickResult.pickedSprite.position.y = -3000;			
               }
            };
            
            k = -35;
            var animate = function() {
               if (k > 3) return;
               k += 0.05;
               for (var i = 0; i < treearray.length; i++) {
                  treearray[i].position.y = k;
               }
            };
            scene.registerBeforeRender(animate);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

输出

在此演示中，我们使用了名为 ballon.png 的图像。图像存储在本地 images/ 文件夹中，也粘贴在下面以供参考。您可以下载您选择的任何图像并在演示链接中使用。

images/balloon.png

气球会升上天空，一旦它们停止，您可以单击它们，它们就会消失。这是使用 pickSprite 函数完成的，该函数在单击创建的精灵时提供详细信息。

当鼠标动作发生并且精灵的位置发生变化时，会调用 onPointerDown 函数。

var animate = function() {
   if (k > 3) return;
   k += 0.05;
   for (var i = 0; i < treearray.length; i++) {
      treearray[i].position.y = k;
   }
};
scene.registerBeforeRender(animate);

在 registerBeforeRender 中调用 animate 函数，该函数负责将气球从初始的 -35 移动到 +3。它通过以 0.05 为增量缓慢移动。

BabylonJS - 粒子

粒子系统是计算机图形学中的一种技术，它利用大量非常小的精灵、3D 模型或其他图形对象来模拟某些类型的"模糊"现象，而这些现象很难用传统的渲染技术再现。

要创建粒子系统，您必须按如下方式调用该类 −

vararticleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);//2000 指的是要产生的粒子总数。

粒子系统需要考虑以下属性 −

particleSystem.particleTexture = new BABYLON.Texture("Flare.png", scene);
particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
particleSystem.emitter = fountain
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);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

发射器属性采用粒子发射自的网格。color1 和 color2 是粒子的颜色。

ColorDead 是在粒子从场景中消失之前应用于粒子的颜色，因此称为 colorDead。

particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;

MinSize 和 maxSize 是赋予粒子的大小。MinlifeTime 和 maxLifeTime 是赋予粒子的寿命。

particleSystem.emitRate = 1500;

emitRate 是粒子发射的速率。

我们在下面显示的演示中使用了圆环。我们使用粒子系统及其属性来获取圆环周围的所有粒子。

演示 1

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            // Setup environment
            
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
            
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var fountain = BABYLON.Mesh.CreateTorus("torus", 2, 1, 8, scene, false);
            
            var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
            particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);

            particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
            particleSystem.emitter = fountain;


            particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from
            particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To...

            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);
            particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

            particleSystem.minSize = 0.1;
            particleSystem.maxSize = 0.5;

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

            particleSystem.emitRate = 1500;

            particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

            particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

            particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
            particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);


            particleSystem.minAngularSpeed = 0;
            particleSystem.maxAngularSpeed = Math.PI;

            particleSystem.minEmitPower = 1;
            particleSystem.maxEmitPower = 3;
            particleSystem.updateSpeed = 0.005;

            particleSystem.start();
            var keys = [];
            var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                                   BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
            
            // 在动画关键点 0 处，缩放的值为"1"
            keys.push({
            frame: 0,
            value: 0
            });
            
            // 在动画关键点 50 处，缩放的值为"0.2"
            keys.push({
            frame: 50,
            value: Math.PI
            });
            
            // 在动画关键点 100 处，缩放的值为"1"
            keys.push({
            frame: 100,
            value: 0
            });
            
            // 启动动画
            animation.setKeys(keys);
            fountain.animations.push(animation);
            scene.beginAnimation(fountain, 0, 100, true);
            return scene;
         }
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });	
      </script>
   </body>
</html>

输出

上述代码行生成以下输出 −

在此演示中，我们使用了名为 dot.jpg 的图像。图像存储在本地 images/ 文件夹中，也粘贴在下面以供参考。您可以下载您选择的任何图像并在演示链接中使用。

以下是用于粒子纹理的图像:images/dot.jpg

演示 2

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Ball/Ground Demo</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(-100, 0,-100));
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);

            var gmat = new BABYLON.StandardMaterial("mat1", scene);
            gmat.alpha = 1.0;
            
            var ground =  BABYLON.Mesh.CreateGround("ground", 100, 100, 20, scene);
            ground.material = gmat;
            gmat.wireframe = true;

            var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
            particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);

            particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
            particleSystem.emitter = ground;

            particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from
            particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To...

            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);
            particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

            particleSystem.minSize = 0.1;
            particleSystem.maxSize = 0.5;

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

            particleSystem.emitRate = 1500;

            particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

            particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

            particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
            particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);

            particleSystem.minAngularSpeed = 0;
            particleSystem.maxAngularSpeed = Math.PI;

            particleSystem.minEmitPower = 1;
            particleSystem.maxEmitPower = 3;
            particleSystem.updateSpeed = 0.005;

            particleSystem.start();


            var keys = [];
            var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                           BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            // 在动画关键点 0 处，缩放的值为"1"
            keys.push({
            frame: 0,
            value: 0
            });
            
            // 在动画关键点 50 处，缩放的值为"0.2"
            keys.push({
            frame: 50,
            value: Math.PI
            });
            
            // 在动画关键点 100 处，缩放的值为"1"
            keys.push({
            frame: 100,
            value: 0
            });
            
            // 启动动画
            animation.setKeys(keys);
            ground.animations.push(animation);
            
            //scene.beginAnimation(ground, 0, 100, true);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

输出

带动画的演示

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Ball/Ground Demo</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(-100, 0, -100));
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);

            var gmat = new BABYLON.StandardMaterial("mat1", scene);
            gmat.alpha = 1.0;
            
            var ground =  BABYLON.Mesh.CreateGround("ground", 100, 100, 20, scene);
            ground.material = gmat;
            gmat.wireframe = true;

            var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
            particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);

            particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
            particleSystem.emitter = ground;

            particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from
            particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To...

            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);
            particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

            particleSystem.minSize = 0.1;
            particleSystem.maxSize = 0.5;

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

            particleSystem.emitRate = 1500;

            particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

            particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);//粒子的重力。
            
            particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
            particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
            
            //场景中粒子的随机方向
            particleSystem.minAngularSpeed = 0;
            particleSystem.maxAngularSpeed = Math.PI;
            particleSystem.minEmitPower = 1;
            particleSystem.maxEmitPower = 3;
            particleSystem.updateSpeed = 0.005;
            
            particleSystem.start();
            
            var keys = [];
            var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
            
            // 在动画关键点 0 处，缩放的值为"1"
            keys.push({
            frame: 0,
            value: 0
            });
            
            // 在动画关键点 50 处，缩放的值为"0.2"
            keys.push({
            frame: 50,
            value: Math.PI
            });
            
            // 在动画关键点 100 处，缩放的值为"1"
            keys.push({
            frame: 100,
            value: 0
            });
            
            // 启动动画
                        animation.setKeys(keys);
            ground.animations.push(animation);
            scene.beginAnimation(ground, 0, 100, true); 
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

输出

上述代码行生成以下输出 −

说明

上述演示显示了具有线框材质的地面，粒子系统从中心产生。

BabylonJS 教程

BabylonJS 有用资源