Babylonjs-parametric-shapes-tube
提供：Dev Guides
BabylonJS-チューブ
チューブは、湾曲した円筒形です。 座標を取得するために適用される方程式（数学関数）に基づいて、さまざまなパラメトリック形状を与えることができます。
構文
以下は、チューブを作成するための構文です-
var tube = BABYLON.Mesh.CreateTube(name, path, radius, tessellation, radiusFunction, cap, scene, updatable?, sideOrientation);パラメーター
チューブを作成するには、次のパラメータを考慮してください-
- 名前-チューブに付けられた名前。
- パス-チューブが構築されるパスです。 この経路は、チューブの中心軸です。 この配列には少なくとも2つのVector3が必要です。 最初のポイントはチューブの開始点で、最後のポイントはチューブの終了点です。 したがって、2つのポイントのみを使用すると、単純な円柱が得られます。
- 半径-これは、チューブに沿って適用される一定の半径値です。 この値は、パラメーターが 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に設定すると、メッシュは更新可能になります。
- SideOrientation -デフォルトの横方向を取ります。
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);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.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>出力
上記のコード行は、次の出力を生成します-
