BabylonJS-アニメーション

アニメーションはシーンをよりインタラクティブにし、リアルな外観を与える印象的なものにします。アニメーションを詳細に理解しましょう。図形にアニメーションを適用して、ある位置から別の位置に移動します。アニメーションを使用するには、必要なパラメーターを使用してアニメーション上にオブジェクトを作成する必要があります。

同じものの構文を見てみましょう-

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

パラメーター

BabylonJSを使用したアニメーションに関連する以下のパラメーターを考慮してください-

アニメーションの名前。

形状のプロパティ–スケーリング、位置の変更など。スケーリングは、構文に示されているものです。ここでは、x軸に沿ってボックスを拡大縮小します。

要求された1秒あたりのフレーム数：このアニメーションで可能な最高の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);

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

出力

アニメーションデモ

//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.

以下は、アニメーションオブジェクトで利用可能な他の機能です-

一時停止（）
再起動（）
やめる（）

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

ここでは、 start と end の2つのキーフレームのみを使用できます。

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>

出力

アニメーションデモ画像

アニメーションブレンディング

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（）

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>

出力

アニメーションブレンディング

アニメーションイベント

アニメーションイベントで必要なことは何でも実行できます。フレームが変更されたとき、またはアニメーションが完了したときに何かを変更したい場合は、アニメーションにイベントを追加することで実現できます。

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-スプライト

コンピューターグラフィックスでスプライトとは何を指しますか？基本的には、より大きなシーンに統合される2次元のビットマップです。メモリを節約するために複数の小さな画像を単一のビットマップに結合する場合、結果の画像はスプライトシートと呼ばれます。スプライトとその使用方法を始めましょう。

スプライトの使用を開始する最初のステップは、スプライトマネージャーを作成することです。

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>

出力

BabylonJS Sprites

このデモでは、tree.png、tree1.pngという名前の画像を使用して木を表示し、bird.pngを使用してシーン内の鳥を表示しました。これらの画像は、images/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。選択した任意の画像をダウンロードして、デモリンクで使用できます。

ツリーに使用される画像を以下に示します。

*images/tree.png*

BabylonJS Sprites

*images/tree1.png*

BabylonJS Sprites

*images/bird.png*

BabylonJS Sprites

スプライトバルーンを使用したもう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);

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

関数animateはregisterBeforeRenderで呼び出され、バルーンを初期-35から+3に移動します。 .05ずつインクリメントすることにより、ゆっくりと移動します。

BabylonJS-パーティクル

パーティクルシステムは、従来のレンダリングテクニックでは再現が非常に難しい特定の種類の「ファジー」現象をシミュレートするために、多数の非常に小さなスプライト、3Dモデル、またはその他のグラフィックオブジェクトを使用するコンピューターグラフィックスのテクニックです。

パーティクルシステムを作成するには、次のようにクラスを呼び出す必要があります-

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

粒子システムでは、次の特性を考慮する必要があります-

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

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

出力

上記のコード行は、次の出力を生成します-

BabylonJS Particles

このデモでは、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);

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

出力

デモ粒子

アニメーション付きデモ

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

出力

上記のコード行は、次の出力を生成します-

パーティクルアニメーション

説明

上記のデモでは、ワイヤフレームマテリアルのある地面を示しており、パーティクルシステムは中心から生成されています。

Babylonjs-animations

BabylonJS-アニメーション

パラメーター

アニメーションのデモ

出力

Demo

出力

アニメーションブレンディング

イージング機能

Demo

出力

アニメーションイベント

BabylonJS-スプライト

Demo

出力

スプライトバルーンを使用したデモ

出力

BabylonJS-パーティクル

デモ1

出力

デモ2

出力

アニメーション付きデモ

出力

説明

目次