BabylonJS - MeshHightlight 层

MeshHightlight 高亮层用于高亮场景中的网格。您可以为其赋予颜色，并将颜色应用于网格的边框。如果您在游戏中想要高亮，可以使用网格高亮层来实现这一点。

语法

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/ 文件夹中，也粘贴在下面以供参考。您可以下载您选择的任何图像并在演示链接中使用。

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，请将其设置为 true。

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

在浏览器中检查演示以查看高光层和添加到其中的光辉。

babylonjs_mesh.html