BabylonJS - Animationen

Animation macht eine Szene interaktiver und beeindruckend und verleiht ihr ein realistisches Aussehen. Lassen Sie uns nun die Animation im Detail verstehen. Wir werden Animationen auf Formen anwenden, um sie von einer Position zur anderen zu verschieben. Um die Animation verwenden zu können, müssen Sie ein Objekt in der Animation mit den erforderlichen Parametern erstellen.

Lassen Sie uns nun die Syntax für das gleiche sehen -

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

Parameter

Berücksichtigen Sie die folgenden Parameter im Zusammenhang mit Animationen mit BabylonJS:

  • Name der Animation.

  • Eigenschaft der Form - zum Beispiel Skalieren, Ändern der Position usw. Skalieren wird in der Syntax angezeigt. Hier wird das Feld entlang der x-Achse skaliert.

  • Bilder pro Sekunde angefordert: höchstmögliche FPS in dieser Animation.

  • Hier entscheiden Sie und geben ein, welche Art von Wert geändert werden soll: Ist es ein Float (z. B. eine Übersetzung), ein Vektor (z. B. eine Richtung) oder eine Quaternion?

  • Genaue Werte sind -

    • BABYLON.Animation.ANIMATIONTYPE_FLOAT

    • BABYLON.Animation.ANIMATIONTYPE_VECTOR2

    • BABYLON.Animation.ANIMATIONTYPE_VECTOR3

    • BABYLON.Animation.ANIMATIONTYPE_QUATERNION

    • BABYLON.Animation.ANIMATIONTYPE_COLOR3

  • Verhalten für die Animation - um die Animation zu stoppen oder erneut zu starten.

  • Verwenden Sie vorherige Werte und erhöhen Sie sie -

    • BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE

  • Neustart vom Anfangswert -

    • BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE

  • Behalten Sie ihren endgültigen Wert

    • BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT

Lassen Sie uns nun das Animationsobjekt erstellen -

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

Demo für Animation

<!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);

            // An array with all animation keys
            var keys = []; 

            //At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 1
            });

            //At the animation key 20, the value of scaling is "0.2"
            keys.push({
               frame: 20,
               value: 0.2
            });

            keys.push({
               frame: 60,
               value: 0.4
            });

            //At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 1
            });
            
            animationBox.setKeys(keys);
            box.animations = [];
            box.animations.push(animationBox);			
            scene.beginAnimation(box, 0, 100, true); 

            // An array with all animation keys
            var keys = []; 

            //At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 1
            });

            //At the animation key 20, the value of scaling is "0.2"
            keys.push({
               frame: 60,
               value: 0.2
            });

            //At the animation key 100, the value of scaling is "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>

Ausgabe

// An array with all animation keys
var keys = []; 

//At the animation key 0, the value of scaling is "1"
keys.push({
   frame: 0,
   value: 1
});

//At the animation key 20, the value of scaling is "0.2"
keys.push({
   frame: 20,
   value: 0.2
});

//At the animation key 100, the value of scaling is "1"
keys.push({
   frame: 100,
   value: 1
});

animationBox.setKeys(keys);

box.animations = [];

box.animations.push(animationBox);

scene.beginAnimation(box, 0, 100, true); //defines the start and the end on the target shape box.

Im Folgenden sind die anderen Funktionen aufgeführt, die für das Animationsobjekt verfügbar sind:

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

Wir können das aufbewahren beginAnimation Referenz in einer Variablen und verwenden Sie die Referenz, um die Animation anzuhalten, anzuhalten oder zurückzusetzen.

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

Zum Beispiel,

newAnimation.pause();

Für Animationsobjekte stehen Funktionen zur Steuerung der Keyframes zur Verfügung.

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);
};

Hier ist die Liste der Funktionen, die Sie ändern können -

  • floatInterpolateFunction
  • quaternionInterpolateFunction
  • quaternionInterpolateFunctionWithTangents
  • vector3InterpolateFunction
  • vector3InterpolateFunctionWithTangents
  • vector2InterpolateFunction
  • vector2InterpolateFunctionWithTangents
  • sizeInterpolateFunction
  • color3InterpolateFunction
  • matrixInterpolateFunction

Um eine schnelle Animation zu erstellen, steht eine Funktion zur Verfügung, die direkt verwendet werden kann.

Zum Beispiel,

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

Hier können Sie nur 2 Keyframes verwenden - start und end.

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);
            
            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>

Ausgabe

Animationsmischung

Sie können Animationsüberblendungen mit Hilfe von enableBlending = true erzielen.

Diese gemischte Animation ändert sich vom aktuellen Objektstatus.

Erleichternde Funktionen

Um die Animation eindrucksvoller zu machen, gibt es einige Beschleunigungsfunktionen, die wir bereits früher mit CSS verwendet haben.

Es folgt eine Liste der Beschleunigungsfunktionen -

  • BABYLON.CircleEase ()

  • BABYLON.BackEase (Amplitude)

  • BABYLON.BounceEase (Bounces, Bounciness)

  • BABYLON.CubicEase ()

  • BABYLON.ElasticEase (Schwingungen, Federung)

  • BABYLON.ExponentialEase (Exponent)

  • BABYLON.PowerEase (Leistung)

  • BABYLON.QuadraticEase ()

  • BABYLON.QuarticEase ()

  • BABYLON.QuinticEase ()

  • BABYLON.SineEase ()

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);
            
            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);

            // An array with all animation keys
            var keys = []; 

            //At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 1
            });

            //At the animation key 20, the value of scaling is "0.2"
            keys.push({
               frame: 60,
               value: 0.2
            });

            //At the animation key 100, the value of scaling is "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>

Ausgabe

Animationsereignis

Sie können alles Notwendige für ein Animationsereignis ausführen. Wenn Sie etwas ändern möchten, wenn der Rahmen geändert wird oder wenn die Animation abgeschlossen ist, können Sie dies erreichen, indem Sie der Animation Ereignisse hinzufügen.

var event1 = new BABYLON.AnimationEvent(50, function() { console.log("Yeah!"); }, true);
// You will get hte console.log when the frame is changed to 50 using animation.

animation.addEvent(event1); //attaching event to the animation.

BabylonJS - Sprites

Worauf beziehen sich Sprites in der Computergrafik? Es ist im Grunde eine zweidimensionale Bitmap, die in eine größere Szene integriert ist. Wenn mehrere kleinere Bilder zu einer einzigen Bitmap kombiniert werden, um Speicherplatz zu sparen, wird das resultierende Bild als Sprite Sheet bezeichnet. Beginnen wir mit Sprites und deren Verwendung.

Der erste Schritt, um mit Sprites zu arbeiten, besteht darin, einen Sprite-Manager zu erstellen.

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

Berücksichtigen Sie die folgenden Parameter, um den Sprite-Manager zu erstellen:

  • Name - Der Name dieses Managers.

  • URL - Die zu verwendende Bild-URL.

  • Capacity of manager - Die maximale Anzahl von Instanzen in diesem Manager. Mit der obigen Instanz werden beispielsweise 2000 Bäume erstellt.

  • Cell size - Die Größe des Bildes.

  • Scene - Die Szene, zu der der Manager hinzugefügt wird.

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

Schauen Sie sich das obige Objekt an. Wir haben ein Spielerbild angegeben und erstellen jetzt 2 Instanzen davon. Die Größe des Bildes beträgt 64. Jedes Bild eines Sprites muss in einem 64-Pixel-Quadrat enthalten sein, nicht mehr und nicht weniger.

Lassen Sie uns nun eine Instanz derselben erstellen, die mit dem Sprite-Manager verknüpft ist.

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

Sie können mit diesem Player-Objekt wie mit anderen Formen oder Maschen herumspielen. Sie können Position, Größe, Winkel usw. zuweisen.

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>

Ausgabe

In dieser Demo haben wir ein Bild namens tree.png, tree1.png verwendet, um Bäume anzuzeigen, bird.png, um Vögel in der Szene anzuzeigen. Diese Bilder werden lokal in Bildern / Ordnern gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

Die für Tree verwendeten Bilder sind unten dargestellt.

images/tree.png

images/tree1.png

images/bird.png

Lassen Sie uns jetzt noch eine Demo mit Sprites-Ballons sehen.

Demo mit Sprites-Ballons

<!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>

Ausgabe

In dieser Demo haben wir ein Bild namens ballon.png verwendet. Die Bilder werden lokal in Bildern / Ordnern gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

images/balloon.png

Luftballons steigen am Himmel auf und sobald sie anhalten, können Sie darauf klicken und sie verschwinden. Dies geschieht mit der Funktion pickSprite, die beim Klicken auf das erstellte Sprite Details liefert.

Die Funktion onPointerDown wird aufgerufen, wenn die Mausaktion stattfindet und die Position des Sprites geändert wird.

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);

Die Funktion animieren wird in registerBeforeRender aufgerufen, wodurch die Ballons von anfänglich -35 auf +3 verschoben werden. Es wird langsam bewegt, indem es um 0,05 erhöht wird.

BabylonJS - Partikel

Ein Partikelsystem ist eine Technik in der Computergrafik, die eine große Anzahl sehr kleiner Sprites, 3D-Modelle oder anderer grafischer Objekte verwendet, um bestimmte Arten von "Fuzzy" -Phänomenen zu simulieren, die mit herkömmlichen Rendering-Techniken ansonsten sehr schwer zu reproduzieren sind.

Um ein Partikelsystem zu erstellen, müssen Sie die Klasse wie folgt aufrufen:

var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);//2000 refers to the total number of particles to be produced.

Die folgenden Eigenschaften müssen für das Partikelsystem berücksichtigt werden:

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);

Die Emitter-Eigenschaft nimmt das Netz an, von dem das Partikel emittiert werden muss. Dascolor1 und color2 sind die Farben für die Partikel.

ColorDead ist die Farbe, die auf das Partikel angewendet wird, kurz bevor es aus der Szene verschwindet, und wird daher als colorDead bezeichnet.

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

MinSize und maxSize ist die Größe der Partikel. MinlifeTime und maxLifeTime ist die Lebensdauer der Partikel.

particleSystem.emitRate = 1500;

Die Emissionsrate ist die Geschwindigkeit, mit der Partikel emittiert werden.

Wir haben Torus in der unten gezeigten Demo verwendet. Wir haben das Partikelsystem und seine Eigenschaften verwendet, um alle Partikel um den Torus herum zu erhalten.

Demo 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);
            
            // At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 0
            });

            // At the animation key 50, the value of scaling is "0.2"
            keys.push({
               frame: 50,
               value: Math.PI
            });

            // At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 0
            });

            // Launch animation
            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>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

In dieser Demo haben wir ein Bild namens dot.jpg verwendet. Die Bilder werden lokal in Bildern / Ordnern gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

Das folgende Bild wird für die Partikelstruktur verwendet: images/dot.jpg

Demo 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);

            // At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 0
            });

            // At the animation key 50, the value of scaling is "0.2"
            keys.push({
               frame: 50,
               value: Math.PI
            });

            // At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 0
            });

            // Launch animation
            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>

Ausgabe

Demo mit Animation

<!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);//gravity for the particle.

            particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
            particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
            
            //random direction for the particles on the scene
            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);
            
            // At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 0
            });

            // At the animation key 50, the value of scaling is "0.2"
            keys.push({
               frame: 50,
               value: Math.PI
            });

            // At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 0
            });

            // Launch animation
            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>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Erläuterung

Die obige Demo zeigt eine Erdung mit Drahtgittermaterial und das Partikelsystem wird von der Mitte aus hergestellt.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved