Underground Color【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Underground%20Color.html&label=All

示例介绍：通过动态调整地下颜色undergroundColor和透明度undergroundColorAlphaByDistance来控制地下地形的视觉效果。效果如下视频所示：

示例代码如下：

<style>
  @import url(../templates/bucket.css);

  #toolbar {
    background: rgba(42, 42, 42, 0.8);
    padding: 4px;
    border-radius: 4px;
  }

  #toolbar input {
    vertical-align: middle;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  #toolbar .header {
    font-weight: bold;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay">
  <h1>Loading...</h1>
</div>
<div id="toolbar">
  <table>
    <tbody>
      <tr>
        <td>启用地下颜色</td>
        <td>
          <input type="checkbox" data-bind="checked: enabled">
        </td>
      </tr>
      <tr>
        <td>近距离(米)</td>
        <td>
          <input type="range" min="0.0" max="1000000.0" step="1.0"
            data-bind="value: nearDistance, valueUpdate: 'input'">
          <input type="text" size="5" data-bind="value: nearDistance">
        </td>
      </tr>
      <tr>
        <td>远距离(米)</td>
        <td>
          <input type="range" min="100000.0" max="3000000.0" step="1.0"
            data-bind="value: farDistance, valueUpdate: 'input'">
          <input type="text" size="5" data-bind="value: farDistance">
        </td>
      </tr>
      <tr>
        <td>近距离透明度</td>
        <td>
          <input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: nearAlpha, valueUpdate: 'input'">
          <input type="text" size="5" data-bind="value: nearAlpha">
        </td>
      </tr>
      <tr>
        <td>远距离透明</td>
        <td>
          <input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: farAlpha, valueUpdate: 'input'">
          <input type="text" size="5" data-bind="value: farAlpha">
        </td>
      </tr>
    </tbody>
  </table>
</div>

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  sceneModePicker: false,
  baseLayerPicker: false,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const scene = viewer.scene;
const globe = scene.globe;

// enableCollisionDetection = false表示：允许相机穿透地形，进入地下查看模型。
scene.screenSpaceCameraController.enableCollisionDetection = false;

const longitude = -3.82518;
const latitude = 53.11728;
const height = -500.0;
const position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
const url = "../SampleData/models/ParcLeadMine/ParcLeadMine.glb";

const entity = viewer.entities.add({
  name: url,
  position: position,
  model: {
    uri: url,
  },
});

viewer.scene.camera.setView({
  destination: new Cesium.Cartesian3(
    3827058.651471591,
    -256575.7981065622,
    5078738.238484612,
  ),
  orientation: new Cesium.HeadingPitchRoll(
    1.9765540737339418,
    -0.17352018581162754,
    0.0030147639151465455,
  ),
  endTransform: Cesium.Matrix4.IDENTITY,
});

const originalColor = Cesium.Color.BLACK;//黑色（默认地下颜色）
const originalNearDistance = 1000.0;//近距离 1000 米
const originalFarDistance = 1000000.0;//远距离 1000000 米
const originalNearAlpha = 0.0;//近距离透明度 0.0（完全透明）
const originalFarAlpha = 1.0;//远距离透明度 1.0（完全不透明）

let color = originalColor;

const viewModel = {
  enabled: true,//地下颜色是否启用
  nearDistance: originalNearDistance,
  farDistance: originalFarDistance,
  nearAlpha: originalNearAlpha,
  farAlpha: originalFarAlpha,
};

Cesium.knockout.track(viewModel);
const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
for (const name in viewModel) {
  if (viewModel.hasOwnProperty(name)) {
    Cesium.knockout.getObservable(viewModel, name).subscribe(update);
  }
}

Sandcastle.addToolbarButton("随机分配一种颜色", function () {
  // 生成随机颜色（透明度 1.0），更新地下颜色
  color = Cesium.Color.fromRandom({
    alpha: 1.0,
  });
  update();
});

Sandcastle.addToolbarButton("清除", function () {
  color = originalColor;
  viewModel.enabled = true;
  viewModel.nearDistance = originalNearDistance;
  viewModel.farDistance = originalFarDistance;
  viewModel.nearAlpha = originalNearAlpha;
  viewModel.farAlpha = originalFarAlpha;
  update();
});

/**
 * 更新地下颜色和透明度
 */
function update() {
  globe.undergroundColor = viewModel.enabled ? color : undefined;

  let nearDistance = Number(viewModel.nearDistance);
  nearDistance = isNaN(nearDistance) ? originalNearDistance : nearDistance;

  let farDistance = Number(viewModel.farDistance);
  farDistance = isNaN(farDistance) ? originalFarDistance : farDistance;

  if (nearDistance > farDistance) {
    nearDistance = farDistance;
  }

  let nearAlpha = Number(viewModel.nearAlpha);
  nearAlpha = isNaN(nearAlpha) ? 0.0 : nearAlpha;

  let farAlpha = Number(viewModel.farAlpha);
  farAlpha = isNaN(farAlpha) ? 1.0 : farAlpha;

  globe.undergroundColorAlphaByDistance.near = nearDistance;
  globe.undergroundColorAlphaByDistance.far = farDistance;
  globe.undergroundColorAlphaByDistance.nearValue = nearAlpha;
  globe.undergroundColorAlphaByDistance.farValue = farAlpha;
}

color = Cesium.Color.LIGHTSLATEGRAY;//浅石板灰
update();