BabylonJS-デカール

デカールは、オブジェクトに貼り付けられたステッカーのようなものです。ステッカーの描画は、メッシュ（たとえば、ゲーム内のオブジェクト）に描画される2D画像を使用して行われます。ゲームでは、弾丸を発射する軍隊があると考えてください。弾丸の印象はオブジェクト上で見る必要があります。だから、Babylonjsでは、デカールを使用して行われます。オブジェクトをクリックすると、クリックした場所に2D画像が描画されます。

デカールは、作成されたメッシュの詳細を追加するために使用されます-弾丸、穴などの詳細以下のデモリンクでは、画像を使用し、インポートしたメッシュに同じ画像を追加しています。

デカールを追加するには、次のコードを使用できます-

var newDecal = BABYLON.Mesh.CreateDecal("decal", mesh, decalPosition, normal, decalSize, angle);

次のコードを実行して、メッシュにデカールを追加します-

BABYLON.SceneLoader.ImportMesh("Shcroendiger'scat", "scenes/", "SSAOcat.babylon", scene, function (newMeshes) {
   var cat = newMeshes[0];//this is mesh shown on the screen.

  //Set the target of the camera to the first imported mesh
   camera.target = cat;

   var decalMaterial = new BABYLON.StandardMaterial("decalMat", scene);
   decalMaterial.diffuseTexture = new BABYLON.Texture("images/impact1.jpg", scene);
   decalMaterial.diffuseTexture.hasAlpha = true;
   decalMaterial.zOffset = -2;

   var onPointerDown = function (evt) {
      if (evt.button !== 0) {
         return;
      }

     //check if we are under a mesh
      var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh === cat;
     //this will give all the meshes , but it will pick the mesh whch is same as cat and return true if it is found });
      if (pickInfo.hit) {//if true
         var decalSize = new BABYLON.Vector3(5, 5, 5);//size of decal is defined

         var newDecal = BABYLON.Mesh.CreateDecal("decal", cat, pickInfo.pickedPoint, pickInfo.getNormal(true), decalSize);//decal is created
         newDecal.material = decalMaterial;//decal material is added.
      }
   }
   var canvas = engine.getRenderingCanvas();
   canvas.addEventListener("pointerdown", onPointerDown, false);

   scene.onDispose = function () {
      canvas.removeEventListener("pointerdown", onPointerDown);
   }
});

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

           //Adding a light
            var light = new BABYLON.HemisphericLight("Hemi", new BABYLON.Vector3(0, 1, 0), scene);

           //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", -1.85, 1.2, 200, BABYLON.Vector3.Zero(), scene);

            camera.attachControl(canvas, true);

           //The first parameter can be used to specify which mesh to import. Here we import all meshes
            BABYLON.SceneLoader.ImportMesh("Shcroendiger'scat", "scenes/", "SSAOcat.babylon", scene, function (newMeshes) {
               var cat = newMeshes[0];

              //Set the target of the camera to the first imported mesh
               camera.target = cat;

               var decalMaterial = new BABYLON.StandardMaterial("decalMat", scene);
               decalMaterial.diffuseTexture = new BABYLON.Texture("images/impact1.jpg", scene);
               decalMaterial.diffuseTexture.hasAlpha = true;
               decalMaterial.zOffset = -2;

               var onPointerDown = function (evt) {
                  if (evt.button !== 0) {
                     return;
                  }

                 //check if we are under a mesh
                  var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh === cat; });
                  if (pickInfo.hit) {
                     var decalSize = new BABYLON.Vector3(5, 5, 5);

                     var newDecal = BABYLON.Mesh.CreateDecal("decal", cat, pickInfo.pickedPoint, pickInfo.getNormal(true), decalSize);
                     newDecal.material = decalMaterial;
                  }
               }
               var canvas = engine.getRenderingCanvas();
               canvas.addEventListener("pointerdown", onPointerDown, false);

               scene.onDispose = function () {
                  canvas.removeEventListener("pointerdown", onPointerDown);
               }
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

上記のデモリンクでは、SSAOcat.babylonメッシュを使用しています。ここからSSAOcat.babylonのjsonファイルをダウンロードできます-

SSAOcat.babylon

ファイルをscenes/フォルダーに保存します。これは、次のように出力を取得するのに役立ちます。

出力

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

デカール

このデモでは、画像 impact1.jpg を使用しました。画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。選択した任意の画像をダウンロードして、デモリンクで使用できます。

*images/impact1.jpg*

Impact1

Babylonjs-decals

BabylonJS-デカール

Demo

出力