BabylonJS - 網格變形

上一頁
下一頁

變形透過某種過渡方式將物體的形狀改變為另一種形狀。我們已經看到了形狀的可更新引數；如果引數設定為false，則不會更新。對於變形，它設定為true，並且網格會更新以改變形狀。

下面的演示展示了線條、帶狀物的變形。

線條演示

<!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( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.7;
            
            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(1, 0, 0);
            pl.intensity = 0.95;

            // lines creation
            var sinpath = [];
            for(var i = -20; i < 20; i++) {
               var x = i;
               var y = 0;
               var z = 0;
               sinpath.push(new BABYLON.Vector3(x, y, z));
            }
            var sinmesh = BABYLON.Mesh.CreateLines("lines", sinpath, scene, true);

            // lines creation
            var cospath = [];
            for(var i = 20; i > -20; i--) {
               var x = i;
               var y = 0;
               var z = 0;
               cospath.push(new BABYLON.Vector3(x, y, z));
            }
            console.log(cospath);
            var cosmesh = BABYLON.Mesh.CreateLines("lines", cospath, scene, true);

            var updatePath = function(sinpath, k) {
               for (var i = 0; i < sinpath.length; i++) {
                  var x = sinpath[i].x;
                  var z = sinpath[i].z;
                  var y = 10 * Math.sin(i / 3 + k); // using sin on y-axis
                  sinpath[i].x = x;
                  sinpath[i].y = y;
                  sinpath[i].z = z;
               }
            };

            var updatePath1 = function(cospath, k) {
               for (var i = 0; i < cospath.length; i++) {
                  var x = cospath[i].x;
                  var z = cospath[i].z;
                  var y = 10 * Math.cos(i / 3 + k); //using cos on y -axis
                  cospath[i].x = x;
                  cospath[i].y = y;
                  cospath[i].z = z;
               }
            };

            // morphing
            var k = 0;
            scene.registerBeforeRender(function() {
               updatePath(sinpath, k);
               updatePath1(cospath, k);
               //updateLines(mesh, path);
               sinmesh = BABYLON.Mesh.CreateLines(null, sinpath, null, null, sinmesh);
               cosmesh = BABYLON.Mesh.CreateLines(null, cospath, null, null, cosmesh);
               k += 0.10;			
               pl.position = camera.position;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

輸出

以上程式碼行生成以下輸出：

Morph Mesh

解釋

這些線條使用正弦和餘弦角進行更新和變形。

從路徑 -20 到 20 建立 2 條線。之後，使用 y 軸上的正弦和餘弦更新線條。

使用可更新選項將網格設定為 true，以便稍後可以更新它。請考慮以下示例以瞭解這一點：

var sinmesh = BABYLON.Mesh.CreateLines("lines", sinpath, scene, true);

之後所有值都設定為 null，並且僅更新路徑。請考慮以下示例以瞭解這一點。

sinmesh = BABYLON.Mesh.CreateLines(null, sinpath, null, null, sinmesh);

最後一個引數是使用的網格的名稱。

變形帶狀物

現在讓我們看看如何建立一個變形帶狀物。

演示

<!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( .5, .5, .5);
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.7;
            
            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(1, 0, 0);
            pl.intensity = 0.95;
            
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
            mat.backFaceCulling = false;
            //mat.wireframe = true;

            // path function
            var pathFunction = function(k) {
               var path = []; 
               for (var i = 60; i > 0; i--) {
                  var x =  i - 30;
                  var y = 0;
                  var z = k;
                  path.push(new BABYLON.Vector3(x, y, z));
               }
               return path;
            };

            // ribbon creation
            var sideO = BABYLON.Mesh.BACKSIDE;
            var pathArray = [];
            for (var i = -20; i < 20; i++) {
               pathArray.push(pathFunction(i * 2));
            }
            
            console.log(pathArray);
            var mesh = BABYLON.Mesh.CreateRibbon("ribbon", pathArray, false, false, 0, scene, true, sideO);
            mesh.material = mat;

            var updatePath = function(path) {
               for (var i = 0; i < path.length; i++) {
                  var x = path[i].x;
                  var z = path[i].z;
                  var y = -20 * Math.sin(i/ 10);
                  path[i].x = x;
                  path[i].y = y;
                  path[i].z = z;
               }
            };
            
            // animation
            scene.registerBeforeRender(function() {		
               for(var p = 0; p < pathArray.length; p++) {
                  updatePath(pathArray[p]);
               }
               mesh = BABYLON.Mesh.CreateRibbon(null, pathArray, null, null, null, null, null, null, mesh);
               pl.position = camera.position;
            });	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

輸出

以上程式碼行生成以下輸出：

Morph Ribbon

解釋

對於帶狀物，首先使用以下命令建立路徑：

var mesh = BABYLON.Mesh.CreateRibbon("ribbon", pathArray, false, false, 0, scene, true, sideO);

方向更改為 var sideO = BABYLON.Mesh.BACKSIDE; 來自預設方向。

網格保持可更新。路徑陣列更改並再次使用以下命令更新到帶狀物網格：

mesh = BABYLON.Mesh.CreateRibbon(null, pathArray, null, null, null, null, null, null, mesh);

傳遞給帶狀物的所有值都為 null，只有更新的 pathArray 被更改併發送。

babylonjs_mesh.htm
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.