BabylonJS - 管道

管道是一種彎曲的圓柱體形狀。它可以根據應用於它的方程式（數學函式）來生成不同的引數化形狀，以獲得座標。

語法

以下是建立管道的語法：

var tube =  BABYLON.Mesh.CreateTube(name, path, radius, tessellation, radiusFunction, cap, scene, updatable?, sideOrientation);

引數

考慮以下引數來建立管道：

名稱 - 給管道指定的名稱。
路徑 - 管道將在其上構建的路徑。此路徑是管道的中心軸。此陣列必須至少包含兩個 Vector3。第一個點是管道的起點，最後一個點是管道的終點。因此，只有兩個點，您將得到一個簡單的圓柱體。
半徑 - 這是沿管道應用的恆定半徑值。僅當引數為 radiusFunction 為 null 時，才會考慮此值。
細分 - 這與徑向段數有關。如果將其設定為 3，則得到一個三角形管道截面；如果將其設定為 4，則得到一個方形截面，依此類推。因此，將其設定為所需的精度級別；段數越多，網格越重。
RadiusFunction - 一個自定義的 javascript 函式。在構建管道時，將在路徑的每個點呼叫此函式。它將採用 2 個引數，當前點的座標以及該點距起點的距離。該函式將根據計算返回半徑。
端蓋 - BABYLON.Mesh.NO_CAP、BABYLON.Mesh.CAP_START、BABYLON.Mesh.CAP_END、BABYLON.Mesh.CAP_ALL。
場景 - 將顯示管道的場景。
可更新 - 預設情況下，此設定為 false。如果設定為 true，則網格可以更新。
側面方向 - 它採用預設的側面方向。

帶有 radiusFunction 的語法

var myradiusFunction = function(i, distance) {
   var radius = 3 * Math.cos(distance / 5);
   return radius;
};
var tube = BABYLON.Mesh.CreateTube("tubr", path, null, 20, myFunction, scene);

演示

<!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.8, 0.8, 0.8);
            var camera = new BABYLON.ArcRotateCamera("Camera", 3 *Math.PI / 2, Math.PI / 2, 50, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            // lights
            var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
            light.groundColor = new BABYLON.Color3(0.2, 0.2, 0.5);
            light.intensity = 0.6;


            var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(-20, 0, -20), scene);
            light2.diffuse = BABYLON.Color3.White();
            light2.specular = BABYLON.Color3.Green();
            light2.intensity = 0.6;


            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.1);
            mat.backFaceCulling = false;
            mat.wireframe = false;

            var curvePoints = function(l, t) { 
               // mathematical function to calculate the curve points.
               var path = [];
               var step = l / t;
               var a = 5;
               for (var i = -l/2; i < l/2; i += step ) {
                  path.push( new BABYLON.Vector3(5 * Math.sin(i*t / 400), 5 * Math.cos(i*t / 400), 0) );
               }
               return path;
            };

            var curve = curvePoints(10, 150);

            var radiusFunction = function(i, distance) { 
               // function to calculate the radiusfunction.
               var t = i / Math.PI * 2 / 8;
               var radius =  Math.sin(t) + i / 25;
               return radius;
            };  

            var tube = BABYLON.Mesh.CreateTube("tube", curve, 2, 60, radiusFunction, 0, scene, false, BABYLON.Mesh.FRONTSIDE);
            tube.material = mat;  
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

輸出

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

babylonjs_parametric_shapes.htm

列印頁面

上一個

下一個