BabylonJS-押し出し

押し出しは、2Dシェイプをボリュームシェイプに変換するのに役立ちます。2Dで星を作成すると、x、y座標があり、zは0になります。2D座標を押し出すと、同じものが3Dに変換されます。したがって、押し出しを使用した2Dの開始は3Dになります。さまざまな2D形状を試して、3Dに変換できます。

構文

BABYLON.Mesh.ExtrudeShape(name, shape, path, scale, rotation, cap, scene, updatable?, sideOrientation)

パラメーター

押出のために次のパラメータを考慮してください-

名前-メッシュ名。
Shape -押し出される形状。これはベクトルの配列です。
パス-シェイプを押し出すパス。シェイプを描画するためのベクトルの配列。
Scale -デフォルトでは1です。Scaleは、初期形状をスケーリングする値です。
回転-各パスポイントで形状を回転します。
キャップ-BABYLON.Mesh.NO_CAP、BABYLON.Mesh.CAP_START、BABYLON.Mesh.CAP_END、BABYLON.Mesh.CAP_ALL。
Scene -メッシュが描画される現在のシーン。
更新可能-デフォルトではfalseです。trueに設定すると、メッシュは更新可能になります。
SideOrientation -横向き-フロント、バック、またはダブル。

デモ-作成行の使用

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

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

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

            var spot = new BABYLON.SpotLight("spot", new BABYLON.Vector3(25, 15, -10), new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.8;

           //shape
            var shape = [
               new BABYLON.Vector3(2, 0, 0),
               new BABYLON.Vector3(2, 2, 0),
               new BABYLON.Vector3(1, 2, 0),
               new BABYLON.Vector3(0, 3, 0),
               new BABYLON.Vector3(-1, 2, 0),
               new BABYLON.Vector3(-2, 2, 0),
               new BABYLON.Vector3(-2, 0, 0),
               new BABYLON.Vector3(-2, -2, 0),
               new BABYLON.Vector3(-1, -2, 0),
               new BABYLON.Vector3(0, -3, 0),
               new BABYLON.Vector3(1, -2, 0),
               new BABYLON.Vector3(2, -2, 0),
            ];
            shape.push(shape[0]);

            var shapeline = BABYLON.Mesh.CreateLines("sl", shape, scene);
            shapeline.color = BABYLON.Color3.Green();
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

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

押し出し

上記の例では、線はx、y座標で描画されます。押し出しを使用して3Dを適用します。このため、babylonjsには押し出し用のクラスがあり、これについては以下で説明します。

押し出しを適用するデモ

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

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

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

            var spot = new BABYLON.SpotLight("spot", new BABYLON.Vector3(25, 15, -10), new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.8;

            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;

           //shape
            var shape = [
               new BABYLON.Vector3(2, 0, 0),
               new BABYLON.Vector3(2, 2, 0),
               new BABYLON.Vector3(1, 2, 0),
               new BABYLON.Vector3(0, 3, 0),
               new BABYLON.Vector3(-1, 2, 0),
               new BABYLON.Vector3(-2, 2, 0),
               new BABYLON.Vector3(-2, 0, 0),
               new BABYLON.Vector3(-2, -2, 0),
               new BABYLON.Vector3(-1, -2, 0),
               new BABYLON.Vector3(0, -3, 0),
               new BABYLON.Vector3(1, -2, 0),
               new BABYLON.Vector3(2, -2, 0),
            ];

            shape.push(shape[0]);
            var path = [ BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, -1) ];

            var shapeline = BABYLON.Mesh.CreateLines("sl", shape, scene);
            shapeline.color = BABYLON.Color3.Green();

            var extruded = BABYLON.Mesh.ExtrudeShape("extruded", shape, path, 1, 0, 0, scene);

            extruded.material = mat;
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

Extrusion1

Polygonmeshbuilderのデモ

polygonmeshbuilderはearcut構造を使用し、それが正常に機能するためには、cdn（https://unpkg.com/[email protected]/dist/earcut.min.js）またはnpm package（httpsから取得できる追加ファイルが必要です。：//github.com/mapbox/earcut#install）

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src="https://unpkg.com/[email protected]/dist/earcut.min.js"></script>
      <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, 0, 1);

            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI/4, 25, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

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

            var corners = [
               new BABYLON.Vector2(4, 0),
               new BABYLON.Vector2(3, 1),
               new BABYLON.Vector2(2, 3),
               new BABYLON.Vector2(2, 4),
               new BABYLON.Vector2(1, 3),
               new BABYLON.Vector2(0, 3),
               new BABYLON.Vector2(-1, 3),
               new BABYLON.Vector2(-3, 4),
               new BABYLON.Vector2(-2, 2),
               new BABYLON.Vector2(-3, 0),
               new BABYLON.Vector2(-3, -2),
               new BABYLON.Vector2(-3, -3),
               new BABYLON.Vector2(-2, -2),
               new BABYLON.Vector2(0, -2),
               new BABYLON.Vector2(3, -2),
               new BABYLON.Vector2(3, -1),
            ];

            var hole = [
               new BABYLON.Vector2(1, -1),
               new BABYLON.Vector2(1.5, 0),
               new BABYLON.Vector2(1.4, 1),
               new BABYLON.Vector2(0.5, 1.5)
            ]

            var poly_tri = new BABYLON.PolygonMeshBuilder("polytri", corners, scene);
            poly_tri.addHole(hole);
            var polygon = poly_tri.build(null, 0.5);
            polygon.position.y = + 4;

            var poly_path = new BABYLON.Path2(2, 0);
            poly_path.addLineTo(5, 2);
            poly_path.addLineTo(1, 2);
            poly_path.addLineTo(-5, 5);
            poly_path.addLineTo(-3, 1);
            poly_path.addLineTo(-4, -4);
            poly_path.addArcTo(0, -2, 4, -4, 100);

            var poly_tri2 = new BABYLON.PolygonMeshBuilder("polytri2", poly_path, scene);
            poly_tri2.addHole(hole);

            var polygon2 = poly_tri2.build(false, 0.5);//updatable, extrusion depth - both optional
            polygon2.position.y = -4;
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

ポリゴンメッシュビルダー

構文

以下はPolygonMeshBuilderの構文です-

var poly_tri2 = new BABYLON.PolygonMeshBuilder("polytri2", poly_path, scene);

Babylonjs-parametric-shapes-extrusion

目次

BabylonJS-押し出し

構文

パラメーター

デモ-作成行の使用

出力

押し出しを適用するデモ

出力

Polygonmeshbuilderのデモ

出力

構文