cesium 区域裁剪、局部渲染

实现如题功能，需要用到cesium的ClippingPlaneCollection与ClippingPlane接口。其中ClippingPlane用于定义裁剪平面，ClippingPlaneCollection则是ClippingPlane的集合。一般来说，我们需要多个裁剪面的协作配合才能实现理想的效果。

ClippingPlaneCollection的使用

 new Cesium.ClippingPlaneCollection({
    modelMatrix: entity.computeModelMatrix(Cesium.JulianDate.now()),
    planes: [
      new Cesium.ClippingPlane(
        new Cesium.Cartesian3(1.0, 0.0, 0.0),
        -700.0
      ),
      new Cesium.ClippingPlane(
        new Cesium.Cartesian3(-1.0, 0.0, 0.0),
        -700.0
      ),
      new Cesium.ClippingPlane(
        new Cesium.Cartesian3(0.0, 1.0, 0.0),
        -700.0
      ),
      new Cesium.ClippingPlane(
        new Cesium.Cartesian3(0.0, -1.0, 0.0),
        -700.0
      ),
    ],
    edgeWidth: edgeStylingEnabled ? 1.0 : 0.0,
    edgeColor: Cesium.Color.WHITE,
    enabled: clippingPlanesEnabled,
  });
  globe.backFaceCulling = true;
  globe.showSkirts = true;

  viewer.trackedEntity = entity;
}

上述代码是cesium沙盒中的例子，参数 modelMatrix为裁剪面集合的模型矩阵，要想定位到自定义位置，其值应为

 Cesium.Transforms.eastNorthUpToFixedFrame(position)//将坐标原点移至当前位置

参数planes为ClippingPlane的集合，后续讲解

globe.backFaceCulling = true;
 globe.showSkirts = true;

这俩参数的作用好像对本功能没啥影响，有了解的小伙伴还请不吝赐教。

ClippingPlane的使用

ClippingPlane有两个参数

new Cesium.ClippingPlane(normal, distance)

第一个参数为裁剪面的归一化法向量，第二个参数为坐标原点距离裁剪面的最短距离。距离符号决定原点位于平面的哪一侧。如果距离为正，原点位于法线方向的半空间中；如果为负，原点位于法线对面的半空间中；如果为零，则平面穿过原点。

应用如下裁剪面

 planes: [
          new Cesium.ClippingPlane(
            new Cesium.Cartesian3(1.0, 0.0, 0.0),
            distance
          ),
          new Cesium.ClippingPlane(
            new Cesium.Cartesian3(-1.0, 0.0, 0.0),
            distance
          ),
          new Cesium.ClippingPlane(
            new Cesium.Cartesian3(0.0, 1.0, 0.0),
            distance
          ),
          new Cesium.ClippingPlane(
            new Cesium.Cartesian3(0.0, -1.0, 0.0),
            distance
          )

其中 const distance = 3000.0

实现的裁剪效果如图

此例仅是简单的矩形区域裁剪，若需完成不规则形状的裁剪，利用微分思想多选取几个点，逐一计算裁剪面归一化法向量即可。

附上沙盒链接

沙盒连接