Cesium圆锥实体视角靠近时部分消失的解决方法

问题现象 #

在Cesium场景中添加大尺寸圆锥实体后，当视角靠近实体时，会出现部分模型片段破损、消失的情况，如图所示：

对应的实现代码如下：

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

const cone = viewer.entities.add({
  name: "cone1",
  position: new Cesium.Cartesian3.fromDegrees(119.999, 30, 200),
  cylinder: {
    topRadius:0,
    bottomRadius:4e6,
    length:8e7,
    slices:100,
    numberOfVerticalLines:6,
    material: Cesium.Color.RED.withAlpha(0.5),
    heightReference:Cesium.HeightReference.RELATIVE_TO_GROUND,
    outline:true,
    outlineColor:Cesium.Color.BLUE,
  },
});

原因分析 #

1. 极端尺寸引发精度误差：你创建的圆锥尺寸极大（底部半径400万公里、长度8000万公里），远超Cesium默认坐标精度范围，浮点计算误差会导致部分顶点位置异常，渲染时出现破损。
2. 视锥体误剔除：当相机靠近实体时，实体部分区域超出Cesium默认视锥体裁剪范围，被错误判定为不可见而剔除。
3. 高度参考放大误差：使用RELATIVE_TO_GROUND高度参考时，Cesium需实时采样地面高度，结合大尺寸实体的计算会进一步放大精度损耗。

解决方案 #

方案1：调整实体高度参考 #

修改高度参考为NONE，减少地面高度采样带来的额外精度误差：

const cone = viewer.entities.add({
  name: "cone1",
  position: new Cesium.Cartesian3.fromDegrees(119.999, 30, 200),
  cylinder: {
    topRadius:0,
    bottomRadius:4e6,
    length:8e7,
    slices:100,
    numberOfVerticalLines:6,
    material: Cesium.Color.RED.withAlpha(0.5),
    heightReference:Cesium.HeightReference.NONE,
    outline:true,
    outlineColor:Cesium.Color.BLUE,
  },
});

方案2：调整相机裁剪参数 #

扩大场景远裁剪面，同时限制相机最小缩放距离，避免实体被误剔除：

// 根据实体尺寸设置远裁剪面
viewer.scene.farPlane = 1e8;
// 限制相机过度靠近实体，减少精度问题
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;

方案3：使用Primitive替代Entity #

对于大尺寸、高精度要求的实体，Primitive提供更底层的渲染控制，能更好处理大尺寸模型的精度问题：

const coneGeometry = new Cesium.CylinderGeometry({
  length: 8e7,
  topRadius: 0,
  bottomRadius: 4e6,
  slices: 100,
});
const geometryInstance = new Cesium.GeometryInstance({
  geometry: coneGeometry,
  modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
    Cesium.Cartesian3.fromDegrees(119.999, 30, 200)
  ),
});
viewer.scene.primitives.add(new Cesium.Primitive({
  geometryInstances: geometryInstance,
  appearance: new Cesium.MaterialAppearance({
    material: Cesium.Material.fromType('Color', {
      color: Cesium.Color.RED.withAlpha(0.5)
    }),
    outline: true,
    outlineColor: Cesium.Color.BLUE
  })
}));

内容的提问来源于stack exchange，提问作者Keei