How to set ClampToGround to Plane in CesiumJS

Question

My purpose is to plot an icon at the height of the terrain of a certain area. I don't wanna use billboard or marker for some reason. I have this code, which adds a Plane with an image material. But it's clamptoGround and heightReference properties are not working properly and Plane is not showing properly (as shown in the attached screenshot). I want to place Plane to the surface of the terrain of that place.

var viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false, //Disable InfoBox widget
  selectionIndicator: false, //Disable selection indicator
  shouldAnimate: true, // Enable animations
  terrainProvider: Cesium.createWorldTerrain(),
});

//Enable lighting based on the sun position
viewer.scene.globe.enableLighting = true;

//Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;

var eData = { position: {x: 4738769.082680055, y: 2182474.0152363363, z: 3658277.3322530985} };
eData.plane = {
              plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),
              dimensions: new Cesium.Cartesian3(100,  100),
              material: new Cesium.ImageMaterialProperty({
                  image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANqSURBVFiF7ZdNbBRlGMd/z+zM7C66xSXbkLZilSbYYIjxYIumoo0BXKoghx40GEzbNJJIjJ78OnDRxIMHA9IYNCEaTawXCcVqIjGlIFvQRA41gAhWpVVp0rVr3DozndfLzjrOdmc/DPHS/2nyPh////u8M8/7jHCd8cg0E0BHcF0JnSNNnNGut4BK0GtxnrD67lQqsgthM6g1QBzkCqLO4/Ju3rz5WLfsc/wxR5vpHFQYMzMMA48Gc0o1xONqT1K37QMCj4XFCHyvYNdG8+2Mt9Y7ibmQZBjYAcwBC0BT1UdwOv/UrYZtZwQeryRYQRswnrH6+wAGFcZCkg8L5FmErcBP/phQASdVX0IizgiwrpJQH3SQt8acJ7b5yp5F2HK0ibNB59AdTVj9ryvkuRrIAbCVy7M/jMykbvitydCYc2HzsWa+Xso3Ui5JRg2sFlc+IPCi2srlZ2uem/RYWfIXpj5fzOSmGzQhvypKdzlyCDsCmx0Kov4lR7m8PHWcgUtH+PbPayUhnv3k/I+RmKY7T6fS34WRhwuA+4LJX5o6ztj8FLlFi2eujP5LhN+eiJgcXNujdyRaNoyrPck6BUiL92QrlxeLyaPcnWgpiPiU8/nZEvv+tdtYv6IRQKKW0xwmoGIjsgs7O1FMnqYttqq4tvfyKO0rUpzNXS3a2+OpYvwiyq2rAoKa9s70RKGsb9z2EO3xFIZovNr6IPc3tJJb/KtA/o/dBxUznZm6BMy79qm9lz+ZGyuSp72yAqCLxisFEUvZCzh3lxzOhglYsg/0TmJmG/j4i2ukDXRnqO1hPbCzImzlMm3laI2uLLEpkefvMQ69FiagpAJe745FSG+40fx9qK1HypEDGKItSQ78uqAbb4aRlwgI9u71K6M97fHGkvZZBVwR2d0tB/+oWkDgyswibHl/de6UZjg7gW9qIHdAPdlpHPqsGmetHLl3cXTI4V9cI3GvwBBgV8g3KeJu2mi+8161aiUg4IFytxbAV/nBW2zN7UPo0qCr0KovAhnR1HBHZM2oyL7Q774seicxt1/l9mr9M9bARMYaUF9a/SXzXi0odsKP7sACLvyXZPWgqpHMD2/KPT1r5mYtK9GVIp80iXsjVq356p6KbWXFAQTi9eaAGqdiPzY11h/rx//+X7AsYFnAsoC/AZeqYn7jLEFzAAAAAElFTkSuQmCC",
                  repeat: Cesium.Cartesian2(1.0, 1.0), // Not repeating
                  transparent: true, // enable png transparency
              }),
              outline: false,
              clampToGround: true,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
            };


var entity = viewer.entities.add(eData);

viewer.camera.setView({
    destination: eData.position
});

However, clampToGround and heightReference is properly working with Box. How can we set clampToGround properly in Plane like Box.

Here is the sandcastle link of above code.

EDIT:

Here is the sandcastle link after applying @ZhefengJin solution. I want to stand icon vertically on the terrain surface as shown in attached image below.

user_7781405 · Answer

Plane entity does not have "clamptoGround" or "heightReference" property. Please see this.

So you may need to set the normal of the plane. The direction of normal should be perpendicular to the terrain. You can refer to this link how to do that.

This is my code.

How to set ClampToGround to Plane in CesiumJS

1 Answers