8.图层蒙版和多个相机配合使用

本教程翻译自官方教程Use Layermasks and Multi-Camera Textures，各位也可以进入本站镜像站点查看

本文目录

使用图层蒙版的多个摄像机的不同网格物体

灯光

瞄准镜实例

使用"图层蒙版"的多个摄像机的不同网格物体

layerMask是分配给每个网格物体和摄像机的数字。它在位级别用于指示灯光和摄像机是否应照亮或显示网格物体。0x0FFFFFFF的默认值将使网格物体被照明，并被任何备用光源和照相机显示。

该功能主要在多个摄像机同时处于活动状态时使用。如果希望有一个在屏幕上始终可见并且可以拾取的网格物体（例如按钮）, 则可以在场景中添加第二个摄像头和光源，以专门显示和照明它。

您只需要第二台摄像头才能看到该按钮。该按钮也应该仅可见一次。

请注意，默认值layerMask的前4位是0或者off。如果第二台摄像机和按钮都具有layerMask以下四个值之一，则第二台摄像机只会看到该按钮：

0x10000000
0x20000000
0x40000000
0x80000000

还应注意，任何人都无法看到一个layerMask为0的网格物体。这可能对隐藏事物有好处。

设置多相机：

if (scene.activeCameras.length === 0){
   scene.activeCameras.push(scene.activeCamera);
}
var secondCamera = new Babylon.Camera(...);
secondCamera.layerMask = 0x10000000;
scene.activeCameras.push(secondCamera);

var Button = new BABYLON.Mesh(...);
Button.layerMask = 0x10000000;

灯光

除非用于第二个摄影机的网格物体的材质纯粹是发光的，否则该按钮仍然会照亮所有其他网格物体，而场景中的其他灯光仍会照亮该按钮。要防止场景灯照亮该按钮，请遍历已存在灯光，并设置excludeWithLayerMask值：

for (var i = scene.lights.length - 1; i >= 0; i--) {
  scene.lights[i].excludeWithLayerMask = 0x10000000;
}

然后使“按钮”亮起：

var light = new BABYLON.Light(...);
light.includeOnlyWithLayerMask = 0x10000000;

最后，如果以后可能会加入更多的灯光，则可以在添加灯光时注册回调：

scene.onNewLightAdded = onNewLight;

可以是:

onNewLight = function(newLight, positionInArray, scene) {
  newLight.excludeWithLayerMask = 0x10000000;
};

瞄准镜实例

这是使用第二个正交摄影机显示枪瞄准器的简单示例。为了简单起见，使用了发光材料来避免对其进行照明。只需将其复制并粘贴到任何场景中，然后调用它即可。选择的layerMask还允许Babylon的Dialog扩展进行互操作, 也许这些可以结合起来使用测距仪进行平视坦克瞄准。

商业化质量的实现可能不会使用CreateBox()，因为它会创建无法直接看到的深度面。除非它是平板电脑应用程序，否则还应考虑窗口大小的更改。

function addGunSight(scene) {
  if (scene.activeCameras.length === 0) {
    scene.activeCameras.push(scene.activeCamera);
  }
  var secondCamera = new BABYLON.FreeCamera(
    "GunSightCamera",
    new BABYLON.Vector3(0, 0, -50),
    scene
  );
  secondCamera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
  secondCamera.layerMask = 0x20000000;
  scene.activeCameras.push(secondCamera);

  meshes = [];
  var h = 250;
  var w = 250;

  var y = BABYLON.Mesh.CreateBox("y", h * 0.2, scene);
  y.scaling = new BABYLON.Vector3(0.05, 1, 1);
  y.position = new BABYLON.Vector3(0, 0, 0);
  meshes.push(y);

  var x = BABYLON.Mesh.CreateBox("x", h * 0.2, scene);
  x.scaling = new BABYLON.Vector3(1, 0.05, 1);
  x.position = new BABYLON.Vector3(0, 0, 0);
  meshes.push(x);

  var lineTop = BABYLON.Mesh.CreateBox("lineTop", w * 0.8, scene);
  lineTop.scaling = new BABYLON.Vector3(1, 0.005, 1);
  lineTop.position = new BABYLON.Vector3(0, h * 0.5, 0);
  meshes.push(lineTop);

  var lineBottom = BABYLON.Mesh.CreateBox("lineBottom", w * 0.8, scene);
  lineBottom.scaling = new BABYLON.Vector3(1, 0.005, 1);
  lineBottom.position = new BABYLON.Vector3(0, h * -0.5, 0);
  meshes.push(lineBottom);

  var lineLeft = BABYLON.Mesh.CreateBox("lineLeft", h, scene);
  lineLeft.scaling = new BABYLON.Vector3(0.01, 1, 1);
  lineLeft.position = new BABYLON.Vector3(w * -0.4, 0, 0);
  meshes.push(lineLeft);

  var lineRight = BABYLON.Mesh.CreateBox("lineRight", h, scene);
  lineRight.scaling = new BABYLON.Vector3(0.01, 1, 1);
  lineRight.position = new BABYLON.Vector3(w * 0.4, 0, 0);
  meshes.push(lineRight);

  var gunSight = BABYLON.Mesh.MergeMeshes(meshes);
  gunSight.name = "gunSight";
  gunSight.layerMask = 0x20000000;
  gunSight.freezeWorldMatrix();

  var mat = new BABYLON.StandardMaterial("emissive mat", scene);
  mat.checkReadyOnlyOnce = true;
  mat.emissiveColor = new BABYLON.Color3(0, 1, 0);

  gunSight.material = mat;
}

演示实例

贡献者

翻译: Alshat