BabylonJS-MeshHightlightレイヤー

ハイライトレイヤーは、シーン内のメッシュをハイライトするために使用されます。色を付けると、メッシュの境界に色が適用されます。ハイライトしたいゲームの場合、メッシュハイライトレイヤーを同じように使用できます。

構文

var h1 = new BABYLON.HighlightLayer("h1", scene);

addmeshプロパティを使用して、同じメッシュを追加できます。

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,{ stencil: true });

         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
            camera.setTarget(BABYLON.Vector3.Zero());
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;
            var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
            sphere.position.y = 1;

            var box = BABYLON.Mesh.CreateBox("box", 5, scene);
            box.position.x = 5;
            box.position.y = 1;

            var materialSphere = new BABYLON.StandardMaterial("texture4", scene);
            materialSphere.emissiveTexture = new BABYLON.Texture("images/baseball.jpg", scene);
            materialSphere.emissiveTexture.uOffset = -0.1;
            sphere.material = materialSphere;

            var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
            var h1 = new BABYLON.HighlightLayer("h1", scene);
            h1.addMesh(sphere, BABYLON.Color3.Green(), true);
            h1.addMesh(ground, BABYLON.Color3.Red());
            h1.addMesh(box, BABYLON.Color3.Red());

            var alpha = 0;
            scene.registerBeforeRender(() => {
               alpha += 0.06;
               var dateValue = new Date();
               var s = dateValue.getSeconds();
               if (s %2 == 0) {
                  h1.outerGlow = false;
                  h1.innerGlow = true;
               } else {
                  h1.outerGlow = true;
                  h1.innerGlow = false;
               }
               h1.blurHorizontalSize = 0.3 + Math.cos(alpha) *0.6 + 0.6;
               h1.blurVerticalSize = 0.3 + Math.sin(alpha/3)* 0.6 + 0.6;

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

出力

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

Highlayer

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

images/baseball.jpg

baseball

説明

ハイライトレイヤーは、シーン内のメッシュをハイライトするために使用されます。

構文

var h1 = new BABYLON.HighlightLayer("h1", scene);

メッシュを追加して、必要な色でハイライトすることができます。これを理解するには、次の例を検討してください。

h1.addMesh(sphere, BABYLON.Color3.Green(), true);
h1.addMesh(ground, BABYLON.Color3.Red());
h1.addMesh(box, BABYLON.Color3.Red());

ハイライトレイヤーをグローにするには、次のコマンドを使用します。innerGlowをtrueに設定してアクティブにします。 outerGlowをアクティブにするには、同じものをtrueに設定します。

h1.outerGlow = true;
h1.innerGlow = false;

ブラウザでデモをチェックして、ハイライトレイヤーとそれに追加されたグローを確認します。

Babylonjs-meshhighlight-layer

目次

BabylonJS-MeshHightlightレイヤー

構文

Demo

出力

images/baseball.jpg

説明

構文