cesium裁切面实践

cesium裁切面实践：沙盒地址 (打不开的自行科学访问)

裁切面法线方向指向保留的部分，本案例通过法线配合unionClippingRegions参数实现相比官方案例没有的：多裁切面互裁，裁两边留中间效果。

<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">
      <select data-bind="options: exampleTypes, value: currentExampleType"></select>
      <input type="checkbox" value="false" data-bind="checked: debugBoundingVolumesEnabled, valueUpdate: 'input'">
      Show bounding volume
      <input type="checkbox" value="true" data-bind="checked: edgeStylingEnabled, valueUpdate: 'input'">
      Enable edge styling
    </div>

    

// Add a clipping plane, a plane geometry to show the representation of the
// plane, and control the magnitude of the plane distance with the mouse.

const viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false,
  selectionIndicator: false,
});

function loadModel(url) {
  const clippingPlanes = new Cesium.ClippingPlaneCollection({
    unionClippingRegions: true,
    planes: [
      new Cesium.ClippingPlane(
        new Cesium.Cartesian3(0.0, 0.0, 1.0),
        5
      ),
      new Cesium.ClippingPlane(
        new Cesium.Cartesian3(0.0, 0.0, -1.0),
        5
      ),
    ]
  });

  const position = Cesium.Cartesian3.fromDegrees(
    -123.0744619,
    44.0503706,
    300.0
  );
  const heading = Cesium.Math.toRadians(135.0);
  const pitch = 0.0;
  const roll = 0.0;
  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    hpr
  );
  const entity = viewer.entities.add({
    name: url,
    position: position,
    orientation: orientation,
    model: {
      uri: url,
      scale: 8,
      minimumPixelSize: 100.0,
      clippingPlanes: clippingPlanes,
    },
  });

  viewer.trackedEntity = entity;

}

const modelUrl = "../SampleData/models/CesiumAir/Cesium_Air.glb";

loadModel(modelUrl);