如何在 CesiumJS 中將 ClampToGround 設置為平面

Question

我的目的是在某個區域的地形高度繪制一個圖標。 出於某種原因，我不想使用廣告牌或標記。 我有這個代碼，它添加了一個帶有圖像材料的平面。 但是它的clamptoGround和heightReference屬性不能正常工作並且Plane不能正常顯示（如附加的屏幕截圖所示）。 我想將 Plane 放置到那個地方的地形表面。

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
});

但是， clampToGround和heightReference與Box一起正常工作。 我們如何像Box一樣在Plane 中正確設置clampToGround 。

這是上述代碼的沙堡鏈接。

---

編輯：

這是應用@ZhefengJin 解決方案后的沙堡鏈接。

Answer 1

平面實體沒有“clamptoGround”或“heightReference”屬性。 請看這個。

所以你可能需要設置飛機的法線。 法線方向應垂直於地形。 你可以參考這個鏈接如何做到這一點。

這是我的代碼。