BabylonJS-メッシュSolidParticles

SolidParticleシステムはメッシュ上で更新されます。メッシュで見たすべてのプロパティは、固体粒子で使用できます。

以下のデモでは、標準マテリアルを作成し、ボックスと球体に割り当てています。

固体粒子システムを作成するには、次のコマンドを実行します-

var SPS = new BABYLON.SolidParticleSystem('SPS', scene);
SPS.addShape(sphere, 500);
SPS.addShape(box, 500);
var mesh = SPS.buildMesh();

システムにパーティクルを追加するには、addShapeメソッドを使用します。形状、つまり追加するメッシュとその数などのパラメーターを取ります。

デモリンクでは、球体とボックスを追加します。カウントは500で、これは500の球と箱を意味します。

sphere.dispose(); //free memory
box.dispose();

dispose（）メソッドは、上記のように行われるメモリの解放に役立ちます。

粒子プロパティ

粒子特性がどのように機能するかを見てみましょう-

var speed = 1.5;
var gravity = -0.01;

デモでは、パーティクルシステムで次の方法を使用しています-

initParticles -このメソッドは、粒子を初期化するのに役立ちます。 SPS.nbParticlesは、利用可能なすべてのパーティクルを提供します。
recycleParticle -このメソッドを使用してパーティクルをリサイクルできます。ITには単一のパーティクルの詳細が含まれています。
updateParticle -パーティクルプロパティを更新できます。

提供されているデモを試してみると、プロパティを変更して出力を確認できます。

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( .1, .2, .4);

            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 50, -300));
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
            light.intensity = 0.9;

            var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(0.2, 0.2, 0.8);
            pl.intensity = 0.75;

           //texture and material
            var url = "images/gem1.jpg";
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            var texture = new BABYLON.Texture(url, scene);
            mat.diffuseTexture = texture;

           //SPS creation
            var sphere = BABYLON.Mesh.CreateSphere("sphere", 32, 2, scene);
            var box = BABYLON.MeshBuilder.CreateBox("box", { size: 2 }, scene);
            var SPS = new BABYLON.SolidParticleSystem('SPS', scene);
            SPS.addShape(sphere, 500);
            SPS.addShape(box, 500);
            var mesh = SPS.buildMesh();
            mesh.material = mat;
            mesh.position.y = -50;
            sphere.dispose(); //free memory
            box.dispose();

           //SPS behavior definition
            var speed = 1.5;
            var gravity = -0.01;

           //init
            SPS.initParticles = function() {
              //just recycle everything
               for (var p = 0; p < this.nbParticles; p++) {
                  this.recycleParticle(this.particles[p]);
               }
            };

           //recycle
            SPS.recycleParticle = function(particle) {
               particle.position.x = 0;
               particle.position.y = 0;
               particle.position.z = 0;
               particle.velocity.x = (Math.random() - 0.5) *speed;
               particle.velocity.y = Math.random()* speed;
               particle.velocity.z = (Math.random() - 0.5) *speed;

               var scale = Math.random() +0.5;
               particle.scale.x = scale;
               particle.scale.y = scale;
               particle.scale.z = scale;
               particle.rotation.x = Math.random()* 3.5;
               particle.rotation.y = Math.random() *3.5;
               particle.rotation.z = Math.random()* 3.5;

               particle.color.r = Math.random() *0.6 + 0.5;
               particle.color.g = Math.random()* 0.6 + 0.5;
               particle.color.b = Math.random() *0.6 + 0.5;
               particle.color.a = Math.random()* 0.6 + 0.5;
            };

           //update : will be called by setParticles()
            SPS.updateParticle = function(particle) {
              //some physics here
               if (particle.position.y < 0) {
                  this.recycleParticle(particle);
               }
               particle.velocity.y += gravity;//apply gravity to y
               (particle.position).addInPlace(particle.velocity); //update particle new position
               particle.position.y += speed/2;

               var sign = (particle.idx % 2 == 0) ? 1 : -1; //rotation sign and new value
               particle.rotation.z += 0.1 *sign;
               particle.rotation.x += 0.05* sign;
               particle.rotation.y += 0.008 * sign;
            };

           //init all particle values and set them once to apply textures, colors, etc
            SPS.initParticles();
            SPS.setParticles();

           //Tuning :
            SPS.computeParticleColor = false;
            SPS.computeParticleTexture = false;

           //scene.debugLayer.show();
           //animation
            scene.registerBeforeRender(function() {
               SPS.setParticles();
               pl.position = camera.position;
               SPS.mesh.rotation.y += 0.01;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

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

固体粒子

このデモでは、画像 gem1.jpg を使用しました。画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。選択した任意の画像をダウンロードして、デモリンクで使用できます。

images/gem1.jpg

Gem1 Image

Babylonjs-mesh-solidparticles

BabylonJS-メッシュSolidParticles

粒子プロパティ

Demo

出力

images/gem1.jpg

目次