BabylonJS - 網格高光圖層

高光層用於高亮顯示場景中的網格。可以給其上色，顏色將應用於網格的邊框。在遊戲中，需要高亮顯示時，可以使用網格高光層。

語法

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

可以使用 addmesh 屬性將網格新增到高光層。

演示

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

輸出

上述程式碼行生成以下輸出 -

在此演示中，我們使用了名為 baseball.jpg 的影像。這些影像儲存在影像/資料夾本地的資料夾中，並貼上在下面供參考。可以下載選定的任何影像並在演示連結中使用。

images/baseball.jpg

說明

高光層用於高亮顯示場景中的網格。

語法

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，將 innerGlow 設為 true。

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

檢查瀏覽器中的演示，檢視高光層和新增到高光層的發光部分。

babylonjs_mesh.htm

列印頁面