记录一次在Cesium场景中模型贴地效果的优化

问题：

今天在开发业务过程中接到一个需求，是优化Cesium场景中模型的贴地效果，之前模型贴地的实现方式是在模型加载时，设置HeightReference为CLAMP_TO_GROUND来实现的，但是在实际使用场景中，这种方式并不能满足需求，以这种方式批量加载的模型，会在视角移过去之后才慢慢一个一个贴到地形上面，如果电脑性能很慢，或者浏览器没有启用GPU渲染，就会非常卡。

优化思路：

问了下万能的GPT，它是这样说的：

然后查了下官方文档，发现有例子，直接复制粘贴需要的部分：

最后改造原有的loadModel函数

async loadModel({ position: [lng, lat], modelUrl, bearing = 0 }) {
     console.log('模型加载')
     //获取精确贴地形高度
     const terrainProvider = viewer.scene.terrainProvider
     const positions = [
       Cesium.Cartographic.fromDegrees(lng,lat),
     ];
     const updatedPositions = await Cesium.sampleTerrainMostDetailed(
       terrainProvider,
       positions
     );
     const height = updatedPositions[0].height

     // 将经纬度转换为笛卡尔坐标
     const position = Cesium.Cartesian3.fromDegrees(lng, lat,height);

     // 计算模型的朝向
     const offsetBearing = 90;
     const heading = Cesium.Math.toRadians(bearing + offsetBearing); // 将角度转换为弧度
     const pitch = 0; // 模型的俯仰角
     const roll = 0; // 模型的翻滚角
     const orientation = Cesium.Transforms.headingPitchRollQuaternion(
       position,
       new Cesium.HeadingPitchRoll(heading, pitch, roll)
     );

     // 添加实体并设置模型
     const viewer = instance.viewer;
     const entity = viewer.entities.add({
       position,
       orientation,
       model: {
         uri: modelUrl,
         scale: 0.0008,
         // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
         distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 8000)
       }
     });
     return entity;
   },