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.

ZhefengJin · Answer 1 · 2021-07-29T12:09:31.760

1

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.

edited Jul 29 '21 at 12:09

answered Jul 27 '21 at 18:50

ZhefengJin

930
8
17

I've tried to set **normal** But plane is not showing vertically on the Terrain. I've edited my Question and added Sandcastle link. Please check. I just want to display vertical arrange Icon on the terrain surface, But don't want to use Billboard because Billboard don't allow to change it's direction. Would you pls modify my code. Thanks – Rhiya Jul 28 '21 at 05:46
You should calculate the normal on the terrain surface, not ellipsoid. let me revise my answer. – ZhefengJin Jul 29 '21 at 12:06
You've almost done it. I've revised my question and added an image to elaborate my question. I want to stand the icon vertically on the terrain surface. I appreciate your help. – Rhiya Aug 02 '21 at 05:20
Please give another try I've updated my question. – Rhiya Aug 12 '21 at 05:00

How to set ClampToGround to Plane in CesiumJS

1 Answers1