Locking entities to the terrain

CesiumJS
1

I lock entities (i.e., billboards with labels and images) to the ground using sampleTerrain() (similar to the Everest sample). It almost works, except some of the entities float above the terrain whereas others "sink" into the terrain. When I zoom in/out, the entities sink/float more.

I recently read that setting HeightReference to Cesium.HeightReference.CLAMP_TO_GROUND" is now supported. However when I try to clamp the entities to the ground, I still have the same sink/float problems.

The following simplified sandcastle illustrates the problem (a "sunken" entity). Did I implement the clamp to ground functionality correctly? Should I still be calling sampleTerrain() (as I am) when using clamp to ground? Thanks!

var positions = [ Cesium.Cartographic.fromDegrees( -111.572177, 40.582083 ) ];
    
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
    animation: false,
  fullscreenButton: false,
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  selectionIndicator: true,
  timeline: false,
  scene3DOnly: true,
  baseLayerPicker : false,
    terrainProvider : new Cesium.CesiumTerrainProvider({ url : ‘http://assets.agi.com/stk-terrain/world’ })
});

function addEntities() {
    viewer.scene.globe.depthTestAgainstTerrain = true;
    
    viewer.entities.suspendEvents();

    var theEntity = viewer.entities.add({
        position : Cesium.Ellipsoid.WGS84.cartographicToCartesian( positions[0]),
        billboard :{
            image : '../images/facility.gif',
            verticalOrigin : Cesium.VerticalOrigin.BOTTOM
        },
        HeightReference : Cesium.HeightReference.CLAMP_TO_GROUND
    });
    
    viewer.entities.resumeEvents();

    viewer.flyTo(
        theEntity, {
        offset : new Cesium.HeadingPitchRange( Cesium.Math.toRadians( 165 ), Cesium.Math.toRadians(-20), 1500

)
    });
}

Cesium.when( Cesium.sampleTerrain( viewer.terrainProvider, 9, positions ), addEntities );

2

Based on other forum posts, I discovered that CLAMP_TO_GROUND works with BillboardCollections, but not entities. The solution was to add the billboards to a collection. This works:

var position = Cesium.Cartesian3.fromDegrees(-111.572177, 40.582083);

var viewer = new Cesium.Viewer('cesiumContainer');

var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
    url : '//assets.agi.com/stk-terrain/world'
});
viewer.terrainProvider = cesiumTerrainProviderMeshes;
viewer.scene.globe.depthTestAgainstTerrain = true;

var ellipsoid = viewer.scene.globe.ellipsoid;
var billboardCollection = viewer.scene.primitives.add(new Cesium.BillboardCollection({
    scene : viewer.scene
}));

billboardCollection.add({
    position : position,
    image : '../images/facility.gif',
    heightReference : Cesium.HeightReference.CLAMP_TO_GROUND
});