BabylonJS - 網格實體粒子(Mesh SolidParticles)

實體粒子系統更新在網格上。我們在網格上看到的全部屬性都可以在實體粒子中使用。

在下面給出的演示中，我們建立了標準材質並將其分配給盒子和球體。

要建立實體粒子系統，請執行以下命令：

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 - 你可以使用此方法回收粒子。它包含單個粒子的詳細資訊。
updateParticle - 允許更新粒子屬性。

試用提供的演示，你可以更改屬性並檢視輸出。

演示

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

babylonjs_mesh.htm

列印頁面