Billboard disappears when zooming in

[veer_shetty]

For the life of my I cant figure out why the smiley face keep going under the terrain as I move closer and closer to it. we are making a dashboard and need to have utility icons right above buildings. here is what it looks like. here is my code= var viewer = new Cesium.Viewer(‘cesiumContainer’, {
scene3DOnly: true,
terrainProvider: Cesium.createWorldTerrain()
});

const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
    showCreditsOnScreen: true,
  }));




var x = 0.1;
var y = 0.1;
function addBillboard(x, y) {
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-106.6504 + x, 35.0844 + y),
      billboard: {
        image: 'smiley2.png', // Make sure this points to your image
        scale : 0.05, // Adjust the scale as needed
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // Aligns the bottom of the billboard
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        pixelOffset: new Cesium.Cartesian2(0, -50), // Lift the billboard up by 50 pixels from its base
        eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -10.0), // Pushes the billboard slightly away from the viewer's eye
        scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5), // Adjust scale by distance
     
    }
    });
  }
  

// Add 20 billboards
viewer.scene.globe.depthTestAgainstTerrain = true;

addBillboard(x, y);

// Fly the camera to the initial position
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-106.6504, 35.0844, 3000),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-45),
roll: 0.0
}
});

// Ensure the globe shows
viewer.scene.globe.show = false;