BabylonJS-メッシュ

この章では、メッシュビルダーを使用してさまざまな形状を作成する方法を学習します。前の章のいずれかで、シェイプの作成方法を既に学習しました。

違いは、meshbuilderを使用すると、色、画像を図形に追加する柔軟性が得られることです。

MeshBuilderを使用したCreateBox

MeshBuilderを使用してボックスを作成する方法を見てみましょう。

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, 0, 1);

            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

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

            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;

            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0, 1, 0);

            var texture = new BABYLON.Texture("images/cube.png", scene);
            mat.diffuseTexture = texture;

            var hSpriteNb =  3; //3 sprites per raw
            var vSpriteNb =  2; //2 sprite raws

            var faceUV = new Array(6);
            for (var i = 0; i < 6; i++) {
               faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
            }

            var options = {
               width: 1.5,
               height: 1.5,
               depth: 1.5,
               faceUV: faceUV
            };

            var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);
            box.material = mat;

            scene.registerBeforeRender(function() {
               pl.position = camera.position;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

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

MeshBuilder CubeBox

上記の例では、次のようにスプライト画像を使用しました。水平に3列、垂直に2列あります。

キューブ

このデモでは、cube.pngという画像を使用しました。画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 cube.pngはスプライト画像であり、スプライト画像は画像のコレクションであることに注意してください。画像を立方体に表示したかったので、立方体のすべての側面を一緒にしたかったのです。選択した同様のスプライトイメージをダウンロードして、デモリンクで使用することもできます。

createBoxビルダーは、サイズのオプションを提供します。

例えば、

var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);

Demo

var hSpriteNb =  3; //3 sprites per raw ie colums horizontally as shown in the image

var vSpriteNb =  2; //2 sprite raws as shown in the image above.

var faceUV = new Array(6);//the cube has 6 sides so creating array for same.
for (var i = 0; i < 6; i++) {
   faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
}

var options = {
   width: 1.5,
   height: 1.5,
   depth: 1.5,
   faceUV: faceUV
};

これは、createBoxメソッドを使用してメッシュビルダーにテクスチャを適用することと呼ばれます。水平方向に3列、垂直方向に2行の画像 cube.png を使用しました。立方体またはボックスには6つの辺があります。

テクスチャを適用するには、optionsパラメーターを使用します。たとえば、

Var box = BABYLON.MeshBuilder.CreateBox ('box', options, scene);

立方体の辺であるサイズ6のfaceUVと呼ばれる配列を定義しました。この配列には、常にVector4要素が含まれます。各Vector4（x、y、z、w）は次のように定義されます-

x = Ubottom
y = Vbottom
z = Utop
w = Vtop

ベクトルの範囲は[0、1]です。 UbottomとVbottomは、テクスチャの切り取りが開始される左下のポイントの2D座標です。 Utop、Vtopは、テクスチャの切り取りが終了する右上のポイントです。

var hSpriteNb =  3; //3 sprites per raw
var vSpriteNb =  2; //2 sprite raws

var faceUV = new Array(6);
for (var i = 0; i < 6; i++) {
   faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
}

デフォルトのテクスチャ、つまり、与えられた画像がボックスのすべての面に適用されると仮定します。あなたが1つの面またはボックスの1つの側面のみを変更したい場合、以下に示すように値を直接割り当てることができます

var hSpriteNb =  3; //3 sprites per raw
var vSpriteNb =  2; //2 sprite raws

var faceUV = new Array(6);
faceUV[4] = new BABYLON.Vector4(0, 0, 1/hSpriteNb, 1/vSpriteNb);

例

<!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, 0, 1);

            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

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

            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;

            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.8, 0.8, 0.8);

            var texture = new BABYLON.Texture("images/3d.png", scene);
            mat.diffuseTexture = texture;

            var hSpriteNb =  3; //3 sprites per raw
            var vSpriteNb =  2; //2 sprite raws

            var faceUV = new Array(6);
            faceUV[4] = new BABYLON.Vector4(0, 0, 1/hSpriteNb, 1/vSpriteNb);

            var options = {
               width:3,
               height:3,
               depth: 3,
               faceUV:faceUV
            };

            var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);
            box.material = mat;

            scene.registerBeforeRender(function() {
               pl.position = camera.position;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

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

Textturepahse4

このデモでは、3d.pngという画像を使用しました。画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 3d.pngはスプライト画像です。スプライト画像は画像のコレクションです。立方体のすべての辺を一緒にして、立方体に画像を表示したかったのです。選択した同様のスプライトイメージをダウンロードして、デモリンクで使用することもできます。

ボックスに使用されるテクスチャ- images/3d.png

3d

メッシュシリンダー

このセクションでは、MeshCylinderの作成方法を確認します。

MeshCylinderを作成するには、BABYLON.MeshBuilder.CreateCylinderクラスを使用する必要があります。

クラスのパラメータは次のとおりです-

var meshcylinder = BABYLON.MeshBuilder.CreateCylinder("meshcylinder", {
   height: 3,
   diameter: 35,
   tessellation: 52
}, scene);

メッシュを使用するCreateCylinderとmeshbuilderの違いは、meshbuilderのオプションを使用できることです。現在、シリンダーに渡すオプションとして高さ、直径、テッセレーションを使用しています。このメッシュの素材として、ワイヤーフレーム付きの標準素材を使用しています。ブラウザで出力を確認し、シリンダーを確認します。ゲーム内で、シーン内で回転するホイールとして同様の構造を使用できます。

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>Babylon.js demo - Mesh Builder</title>
      <script src = "babylon.js"></script>
      <style>
         html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
      </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", -Math.PI/6, 1.3, 40, new BABYLON.Vector3(0, -3, 0), scene);

            var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);

            var mat = new BABYLON.StandardMaterial("mat", scene);
            mat.diffuseColor = new BABYLON.Color3(0.1, .5, 0);
            mat.specularColor = new BABYLON.Color3(0, 0, 0);
            mat.wireframe = true;

            var meshcylinder = BABYLON.MeshBuilder.CreateCylinder("meshcylinder", {
               height: 3,
               diameter: 35,
               tessellation: 52
            }, scene);

            meshcylinder.material = mat;
            meshcylinder.position = new BABYLON.Vector3(0, 0, 0);

            scene.activeCamera.attachControl(canvas);
            return scene;
         };

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

出力

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

メッシュシリンダー

メッシュビルダーで作成された多くの形状が、1つのデモで一緒に使用されるようになりました。以下のデモリンクで説明されている形状は、後続のセクションにリストされています。

リンク：/babylonjs/babylonjs_mesh_ground [地面]
リンク：/babylonjs/babylonjs_mesh_cone [コーン]
リンク：/babylonjs/babylonjs_mesh_plane [平面]
リンク：/babylonjs/babylonjs_mesh_disc [ディスク]
リンク：/babylonjs/babylonjs_mesh_torus [トーラス]
リンク：/babylonjs/babylonjs_mesh_polyhedron [多面体]
リンク：/babylonjs/babylonjs_mesh_icosphere [IcoSphere]

BabylonJS –メッシュ交差点

ゲームで2つのオブジェクトが交差するときに何をする必要があるかを知っているので、ゲームのメッシュ交差は重要です。以下のデモでは、メッシュが交差するときにキャプチャする必要があるイベントについて、同じ概念を説明しています。

以下に示すデモでは、次の2つの概念を取り上げました-

交差メッシュ
交差点

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

            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var matcone = new BABYLON.StandardMaterial("mat1", scene);
            matcone.alpha = 1.0;
            matcone.diffuseColor = new BABYLON.Color3(0, 0, 0);
            matcone.wireframe = true;

            var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {height : 10, diameterTop: 10,diameterBottom:10, tessellation: 5}, scene);
            cone.position= new BABYLON.Vector3(12,1,0);
            cone.material = matcone;

            var balloon1 = BABYLON.Mesh.CreateSphere("balloon1",5, 1.0, scene);
            var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 5, 1.0, scene);
            var balloon3 = BABYLON.Mesh.CreateSphere("balloon3", 5, 1.0, scene);

            balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
            balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);
            balloon3.material = new BABYLON.StandardMaterial("matBallon", scene);

            balloon1.position = new BABYLON.Vector3(4, 2, 0);
            balloon2.position = new BABYLON.Vector3(5, 1, 0);
            balloon3.position = new BABYLON.Vector3(7, 0, 0);

            var pointToIntersect = new BABYLON.Vector3(10, 0, 0);
            var a = 0.01;

            scene.registerBeforeRender(function () {
               if (balloon1.intersectsMesh(cone, false)) {
                  balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
               } else {
                  balloon1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
               }

               if (balloon2.intersectsMesh(cone, false)) {
                  balloon2.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
               } else {
                  balloon2.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
               }

               if (balloon3.intersectsMesh(cone, false)) {
                  balloon3.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
               } else {
                  balloon3.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
               }

               if (balloon3.intersectsPoint(pointToIntersect)) {
                  balloon3.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
               }

               a += 0.01;
               balloon1.position.x += Math.cos(a)/10;
               balloon2.position.x += Math.cos(a)/10;
               balloon3.position.x += Math.cos(a)/10;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

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

メッシュ交差点

説明

上記のコードを使用して、ワイヤーフレームがtrueのシリンダーを作成しました。 3つの球体を作成しました。球体の元の色は緑です。

*scene.registerBeforeRender* 関数では、ここで円柱であるメッシュとの交差に基づいて球体の色を変更します。

*registerBeforeRender* の次のコードを考慮してください-

if (balloon1.intersectsMesh(cone, false)) {
   balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
   balloon1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}

*intersectsMesh* は、渡されたパラメーターで指定されたメッシュと交差する場合、trueまたはfalseを返します。

例えば、

balloon1.intersectsMesh(cone, false);//cone refers to the cylinder mesh here.

球体の色が赤に変わり、円柱と交差します。それ以外の場合、緑色です。

次のコードは、交差するポイントに使用されます-

var pointToIntersect = new BABYLON.Vector3(10, 0, 0);
if (balloon3.intersectsPoint(pointToIntersect)) {
   balloon3.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
}

ここで、 pointtoIntersect 変数は、x軸で10の位置ベクトルです。球体が交差点と交差すると、球体の色が黒に変わります。

BabylonJS – MeshPickingコリジョン

実際に衝突を選択すると座標が得られ、メッシュをその場所に配置できます。オブジェクトはマウスで選択され、マウスでクリックした場所に配置できます。ユーザーがマウスをクリックした場所にメッシュ（オブジェクト）を配置する必要があると考えてください。そのため、衝突を検出することで、クリックした場所の位置の座標を確認できます。

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(1, 1, 1);

           //setup environment
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 10, 20), scene);
            var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -30), scene);

            var balloon1 = BABYLON.Mesh.CreateSphere("balloon1",5, 1.0, scene);
            var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 5, 1.0, scene);
            balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
            balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);

            balloon1.position = new BABYLON.Vector3(0, 0, -0.1);
            balloon2.position = new BABYLON.Vector3(0, 0, -0.1);
            balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
            balloon2.material.emissiveColor = new BABYLON.Color3(0, 0, 1);

           //Wall
            var wall = BABYLON.Mesh.CreatePlane("wall", 30.0, scene);
            wall.material = new BABYLON.StandardMaterial("wallMat", scene);
            wall.material.emissiveColor = new BABYLON.Color3(0.5, 1, 0.5);

           //When pointer down event is raised

            scene.onPointerDown = function (evt, pickResult) {
              //if the click hits the ground object, we change the impact position
               if (pickResult.hit) {
                  var dateValue = new Date();
                  var secondNumber = dateValue.getSeconds();
                  if (secondNumber % 2 == 0) {
                  balloon1.position.x = pickResult.pickedPoint.x;
                  balloon1.position.y = pickResult.pickedPoint.y;
                  } else {
                     balloon2.position.x = pickResult.pickedPoint.x;
                     balloon2.position.y = pickResult.pickedPoint.y;
                  }
               }
            };
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

ピッキング衝突

説明

上記の例では、平面と2つの球体を使用しました。この出力を生成するには、次のコードを使用します-

scene.onPointerDown = function (evt, pickResult) {
  //if the click hits the ground object, we change the impact position
   if (pickResult.hit) {
      var dateValue = new Date();
      var secondNumber = dateValue.getSeconds();
      if (secondNumber % 2 == 0) {
      balloon1.position.x = pickResult.pickedPoint.x;
      balloon1.position.y = pickResult.pickedPoint.y;
      } else {
         balloon2.position.x = pickResult.pickedPoint.x;
         balloon2.position.y = pickResult.pickedPoint.y;
      }
   }
};

イベント scene.onPointerDown は、この例では pickResult である調整された-x、yおよびzを提供します。

グラウンドメッシュをクリックすると、pickResult.hitがtrueになります。奇数/偶数秒を考慮し、球体の位置を変更して、上記のように結果のz座標とy座標を選択します。位置が変更されると、マウスをクリックして配置した場所に球が配置されます。上記のデモを同じように試すことができます。

BabylonJS –レイキャスト

レイキャストは太陽の光線に似ており、シーン内の衝突と交差を確認するために使用されます。

構文

var ray = new BABYLON.Ray(origin, direction, length);

パラメーター

レイキャストの次のパラメータを考慮してください-

Origin -光線が始まる場所。
方向-光線の方向は次のように計算されます-

var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);

次に、方向を取得するには、原点、ボックスの位置からそれを引きます-

長さ-光線の長さ。

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

            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);

            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 10, scene);

            var box = BABYLON.Mesh.CreateBox("box", 4.0, scene);
            box.position.y = 2;
            box.scaling.z = 2;

            var matBox = new BABYLON.StandardMaterial("matBox", scene);
            matBox.diffuseColor = new BABYLON.Color3(0.8, 0.1, 0.5);
            box.material = matBox;
            box.isPickable = false;

            var box2 = BABYLON.Mesh.CreateBox("box2", 8.0, scene);
            box2.position = new BABYLON.Vector3(-20, 4, 0);

            var matBox2 = new BABYLON.StandardMaterial("matBox2", scene);
            matBox2.diffuseColor = new BABYLON.Color3(1, 0, 0);
            box2.material = matBox2;

            var box3 = BABYLON.Mesh.CreateBox("box3", 8.0, scene);
            box3.position = new BABYLON.Vector3(20, 4, 0);

            var matBox3 = new BABYLON.StandardMaterial("matBox3", scene);
            matBox3.diffuseColor = new BABYLON.Color3(1, 0, 0);
            box3.material = matBox3;

            var box4 = BABYLON.Mesh.CreateBox("box4", 8.0, scene);
            box4.position = new BABYLON.Vector3(0, 0, 20);

            var matBox4 = new BABYLON.StandardMaterial("matBox4", scene);
            matBox4.diffuseColor = new BABYLON.Color3(0, 1, 0);
            box4.material = matBox4;

            var box5 = BABYLON.Mesh.CreateBox("box5", 8.0, scene);
            box5.position = new BABYLON.Vector3(0, 0, -20);

            var matBox5 = new BABYLON.StandardMaterial("matBox5", scene);
            matBox5.diffuseColor = new BABYLON.Color3(0, 1, 0);
            box5.material = matBox5;

            function mousemovef() {
               var pickResult = scene.pick(scene.pointerX, scene.pointerY);

               if (pickResult.hit) {
                  var diffX = pickResult.pickedPoint.x - box.position.x;
                  var diffY = pickResult.pickedPoint.z - box.position.z;
                  box.rotation.y = Math.atan2(diffX,diffY);
               }
            }

            scene.onPointerMove = function () {
               mousemovef();
            };

            function vecToLocal(vector, mesh) {
               var m = mesh.getWorldMatrix();
               var v = BABYLON.Vector3.TransformCoordinates(vector, m);
               return v;
            }

            scene.registerBeforeRender(function () {
               var origin = box.position;

               var forward = new BABYLON.Vector3(0,0,1);
               forward = vecToLocal(forward, box);

               var direction = forward.subtract(origin);
               direction = BABYLON.Vector3.Normalize(direction);

               var length = 100;

               var ray = new BABYLON.Ray(origin, direction, length);
              //ray.show(scene, new BABYLON.Color3(1, 1, 0.1));

               var hit = scene.pickWithRay(ray);

               if (hit.pickedMesh) {
                  hit.pickedMesh.scaling.y  += 0.01;
               }
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

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

レイキャスト

説明

中央にメインボックスがあり、レイキャストとして機能します。いずれかのボックスを指すと、ボックスのサイズが大きくなります。この概念は、ゲームをプレイしているときに、他のオブジェクトがどのオブジェクトに接触し、必要なアクションを実行できるかを知るのに役立ちます。

*box.isPickable = false;* を追加して、中央のメインボックスが考慮されないようにします。 接触する光線にオブジェクトを含めたくない場合は、 *box.isPickable = false;* を追加します。

次のコードは、レイによって選択されるボックスのスケーリングを追加します。

scene.registerBeforeRender(function () {
   var origin = box.position;
   var forward = new BABYLON.Vector3(0,0,1);
   forward = vecToLocal(forward, box);

   var direction = forward.subtract(origin);
   direction = BABYLON.Vector3.Normalize(direction);

   var length = 100;

   var ray = new BABYLON.Ray(origin, direction, length);

   var hit = scene.pickWithRay(ray);

   if (hit.pickedMesh) {
      hit.pickedMesh.scaling.y  += 0.01;
   }
});

*var ray = new BABYLON.Ray（origin、direction、length）;* は光線を作成し、メインボックスの位置を原点とします。

光線への方向は次のように計算されます-

var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);

次に、方向を取得するために、ボックスの位置である原点からそれを減算します。関数 vecToLocal は、ベクトルにメッシュ行列を掛けることにより、メッシュの視点から位置を変換するように設計されています。

*var hit = scene.pickWithRay（ray）;* を使用して、レイからヒットポイントを取得します。

光線がメッシュと一致する位置を示します。

スケーリングは、次のコード行を実行することによって選択されたメッシュに適用されます-

if (hit.pickedMesh) {
   hit.pickedMesh.scaling.y  += 0.01;
}

ブラウザで上記の例を試して、出力を確認してください。

述語関数を使用したレイキャスト

次に、述語関数を使用したレイキャストの動作と、rayhelperで表示される方向を見てみましょう。

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

            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 10, scene);

            var box = BABYLON.Mesh.CreateBox("box", 4.0, scene);
            box.position.y = 2;
            box.scaling.z = 2;
            var matBox = new BABYLON.StandardMaterial("matBox", scene);
            matBox.diffuseColor = new BABYLON.Color3(0.8, 0.1, 0.5);
            box.material = matBox;
            box.isPickable = false;

            var box2 = BABYLON.Mesh.CreateBox("box2", 8.0, scene);
            box2.position = new BABYLON.Vector3(-20, 4, 0);
            var matBox2 = new BABYLON.StandardMaterial("matBox2", scene);
            matBox2.diffuseColor = new BABYLON.Color3(1, 0, 0);
            box2.material = matBox2;

            var box3 = BABYLON.Mesh.CreateBox("box3", 8.0, scene);
            box3.position = new BABYLON.Vector3(20, 4, 0);
            var matBox3 = new BABYLON.StandardMaterial("matBox3", scene);
            matBox3.diffuseColor = new BABYLON.Color3(1, 0, 0);
            box3.material = matBox3;

            var box4 = BABYLON.Mesh.CreateBox("box4", 8.0, scene);
            box4.position = new BABYLON.Vector3(0, 0, 20);
            var matBox4 = new BABYLON.StandardMaterial("matBox4", scene);
            matBox4.diffuseColor = new BABYLON.Color3(0, 1, 0);
            box4.material = matBox4;

            var box5 = BABYLON.Mesh.CreateBox("box5", 8.0, scene);
            box5.position = new BABYLON.Vector3(0, 0, -20);
            var matBox5 = new BABYLON.StandardMaterial("matBox5", scene);
            matBox5.diffuseColor = new BABYLON.Color3(0, 1, 0);
            box5.material = matBox5;

           //ray showing the direction
            var ray = new BABYLON.Ray();
            var rayHelper = new BABYLON.RayHelper(ray);

            var localMeshDirection = new BABYLON.Vector3(0, 0, -1);
            var localMeshOrigin = new BABYLON.Vector3(0, 0, -.4);
            var length = 10;

            rayHelper.attachToMesh(box, localMeshDirection, localMeshOrigin, length);
            rayHelper.show(scene);

            function mousemovef() {
               var pickResult = scene.pick(scene.pointerX, scene.pointerY);

               if (pickResult.hit) {
                  var diffX = pickResult.pickedPoint.x - box.position.x;
                  var diffY = pickResult.pickedPoint.z - box.position.z;
                  box.rotation.y = Math.atan2(diffX,diffY);
               }
            }

            scene.onPointerMove = function () {
               mousemovef();
            };

            function vecToLocal(vector, mesh) {
               var m = mesh.getWorldMatrix();
               var v = BABYLON.Vector3.TransformCoordinates(vector, m);
               return v;
            }

            scene.registerBeforeRender(function () {
               var origin = box.position;
               function predicate(mesh) {
                  if (mesh == box2 || mesh == box || mesh == box5) {
                     return false;
                  }
                  return true;
               }

               var forward = new BABYLON.Vector3(0,0,1);
               forward = vecToLocal(forward, box);

               var direction = forward.subtract(origin);
               direction = BABYLON.Vector3.Normalize(direction);

               var length = 100;

               var ray = new BABYLON.Ray(origin, direction, length);
              //ray.show(scene, new BABYLON.Color3(1, 1, 0.1));

               var hit = scene.pickWithRay(ray, predicate);
               if (hit.pickedMesh) {
                  hit.pickedMesh.scaling.y  += 0.01;
               }
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

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

レイキャスト述語

説明

述語関数を使用したレイキャストは、必要なメッシュを選択するのに役立ちます。メッシュを選択したくない場合は、同じものを無視できます。

function predicate(mesh) {
   if (mesh == box2 || mesh == box || mesh == box5) {
      return false;
   }
   return true;
}

上記の関数は、光線によって選択されるメッシュを提供します。選択されたメッシュがbox2、box、またはbox5の場合、falseを返します。それ以外の場合、true。

上記の例を同じように試すことができます。

BabylonJS –メッシュシャドウ

シャドウは、作成されたメッシュに光が当たる方法に基づいてレンダリングされます。これらは、3Dの世界で出力をリアルに見せるために重要な役割を果たします。

babylonjsを使用して影を作成する方法を学びましょう。

構文

var shadowGenerator00 = new BABYLON.ShadowGenerator(shadowsize, light);

パラメーター

メッシュの影に関連する次のパラメータを考慮してください-

Shadowsize -影のサイズ。
Light -シーンで使用されるライト。

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(1, 1, 1);
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);
           //light1
            var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
            light.position = new BABYLON.Vector3(20, 40, 20);

            var ground01 = BABYLON.Mesh.CreateGround("Spotlight Hard Shadows", 24, 60, 1, scene, false);
            var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
            groundMaterial.diffuseTexture = new BABYLON.Texture("images/gr1.jpg", scene);
            groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            groundMaterial.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);

            ground01.material = groundMaterial;
            ground01.receiveShadows = true;
            ground01.position.x = -5;

            var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
            box.position.x = -5;
            box.position.y = 5;
            var shadowGenerator00 = new BABYLON.ShadowGenerator(512, light);
            shadowGenerator00.getShadowMap().renderList.push(box);
           //shadowGenerator00.usePoissonSampling = true;
           //shadowGenerator00.useExponentialShadowMap = true;
            shadowGenerator00.useBlurExponentialShadowMap = true;
            shadowGenerator00.bias = 0.01;
            scene.registerBeforeRender(function() {
               box.rotation.x += 0.01;
               box.rotation.x += 0.01;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

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

シャドウ

説明

影を作成するには、shadowgeneratorを作成する必要があります。以下に例を示します。

var shadowGenerator00 = new BABYLON.ShadowGenerator(512, light);

シャドウが必要なメッシュを定義するには、上記のジェネレーターに同じものを追加する必要があります。

shadowGenerator00.getShadowMap().renderList.push(box);

これで、地面とその上にボックスを作成しました。箱の影が地面に落ちるようにします。それを行うには、次のように行われている影を受け取るために地面がマークされていることを確認する必要があります-

ground01.receiveShadows = true;

次のような影に利用可能ないくつかのフィルターがあります-

shadowGenerator.usePoissonSampling = true; - Called Poisson sampling
shadowGenerator.useExponentialShadowMap = true; - Exponential Shadow Map
shadowGenerator.useBlurExponentialShadowMap= true;  - Blur Exponential Shadow Map

デモでは、shadowGenerator00.useBlurExponentialShadowMap = true;を使用しました。他のものを試して、出力がどのように見えるかを確認できます。

ここでは、gr1.jpgという画像を使用しました。画像は、images/フォルダーにローカルに保存されます。選択した任意の画像をダウンロードして、デモリンクで使用できます。

BabylonJS –メッシュ上の高度なテクスチャ

このセクションでは、メッシュの高度なテクスチャについて学習します。さまざまなテクスチャを以下に示します-

リンク：/babylonjs/babylonjs_mesh_cube_texture [キューブテクスチャ]
リンク：/babylonjs/babylonjs_mesh_mirror_bump_texture [ミラーとバンプテクスチャ]
リンク：/babylonjs/babylonjs_mesh_video_texture [ビデオテクスチャ]

ミラー、バンプ、ビデオ、屈折などの複雑なテクスチャをメッシュに適用しましょう。

Sr.No.	Mesh & Description
1	MeshHightlight Layer ハイライトレイヤーは、シーン内のメッシュをハイライトするために使用されます。色を付けると、メッシュの境界に色が適用されます。ハイライトしたいゲームの場合、メッシュハイライトレイヤーを同じように使用できます。
2	Morph a Mesh モーフィングは、何らかの遷移手段によってオブジェクトの形状を別の形状に変更します。図形の更新可能なパラメーターを見てきました。それ以外の場合、パラメーターはfalseに設定されます。モーフィングの場合、trueに設定され、メッシュが更新されて形状が変更されます。
3	Actions to Mesh アクションは、メッシュに相互作用を追加するために使用されます。イベントは、メッシュをクリックしたとき、またはメッシュが交差または衝突したときにアクティブになります。
4	Mesh AssetsManager assestsmanagerクラスを使用すると、メッシュ、画像、およびバイナリファイルをシーンにロードできます。
5	Import Mesh Import Meshを使用して学習します。
6	Mesh Morph Targets 線、リボン、多角形などの変形を見てきました。さて、このデモでは球と箱のモーフィングが見られます。モーフターゲットを使用すると、球の形状が変更されます。これは以下のデモで見られます。
7	Mesh Instances シーンに同一のメッシュを描画する場合は、インスタンスを使用します。
8	Mesh LOD & Instances LODは距離の線を表します。この機能を使用すると、ビューアの距離に基づいてメッシュを指定できます。ビューアーからオブジェクトまでの距離が長くなると、LODを使用してメッシュの詳細レベルが明確に表示されます。
9	Mesh VolumemetricLightScatteringPost-process このプロセスは、以下の出力に示すように光を散乱させます。ブラウザで同じことをテストすると、メッシュを通して光がどのように散乱するかがわかります。
10	Mesh EdgesRenderer EdgesRenderingは、上記の出力に示すように、メッシュの周囲にエッジを描画するために使用されます。
11	Mesh BlendModes マテリアルのアルファモードを変更することにより、ブレンドモードを作成できます。
12	Mesh SolidParticles SolidParticleシステムはメッシュ上で更新されます。メッシュで見たすべてのプロパティは、固体粒子で使用できます。
13	Mesh FacetData ファセットデータは大量のメモリを消費するため、この機能はデフォルトでは有効になっていません。有効にするには、必要に応じてメッシュを作成し、ファセットデータを更新する必要があります。

Babylonjs-mesh

BabylonJS-メッシュ

MeshBuilderを使用したCreateBox

Demo

出力

Demo

例

出力

メッシュシリンダー

Demo

出力

BabylonJS –メッシュ交差点

出力

説明

BabylonJS – MeshPickingコリジョン

Demo

出力

説明

BabylonJS –レイキャスト

構文

パラメーター

Demo

出力

説明

述語関数を使用したレイキャスト

Demo

出力

説明

BabylonJS –メッシュシャドウ

構文

パラメーター

Demo

出力

説明

BabylonJS –メッシュ上の高度なテクスチャ

目次